angular基础知识(一)路由传参

路由传参有几种方式？

3种。分别是查询参数中传递数据、路由路径中传递数据、在路由配置中传递数据。

查询参数中传递数据

类似于下面这样：

/product?id=1&name=2 => ActivatedRoute.queryParams[id]

在路由后面用？加参数名字和值，在目标组件中通过ActivatedRoute.queryParams的参数名字来获取参数的值。

路由路径中传递数据

类似于下面这样：

{path:/product/:id} => /product/1 =>ActivatedRoute.params[id]

在指定路由路径的时候定义参数的名字， 在实际的路径中携带此参数，在目标组件中使用ActivatedRoute.params通过定义的参数名称来获取路由中的参数。比如上图在路由中定义的参数为id，则在目标组件中取参数的名字也是id。

路由配置中传递数据

类似于下面这样：

{path:/product/，component:ProductComponent,data:[{isPro:true}]} => ActivatedRoute.data[0][isPro]

在指定路由的时候，通过data定义一些静态的参数。data是1个数组，数组里是每一个对象，每个对象可以放很多参数。在目标组件中，通过ActivatedRoute.data来获取数组，用数组下标来取得对象，在对象中通过参数名称获得参数。

注意

通过ActivatedRoute快照获取数据的时候，只能在目标组件建立的时候取到。如果需要拿到每次传递的参数，建议使用ActivatedRoute的params的订阅方法。