路由传参有几种方式?
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的订阅方法。