angular路由传递参数_使用angular router路由传递数据

如何在路由时传递数据？

第一种方式：在查询参数中传递数据 /product?id=1&name=2 => ActivatedRoute.queryParams[id]

传递方式：/product?id=1&name=2

目标组建中接收参数方式： ActivatedRoute.queryParams[id] //获取id的值

第二种方式：在路由路径中传递数据 { path:/product/:id } => /product/1 => ActivatedRoute.params[id]

定义路由路径时指定路由的名字，如： { path:/product/:id }

实际的路径中携带参数，如：/product/1

路由的目标组件中接收参数，如： ActivatedRoute.params[id]

(1.修改路由中的path属性，使其可以携带参数；)

(2.修改路由链接的参数来传递数据)

(3.接收参数)

第三种方式：在路由配置中传递数据 {path:/product, component:ProductComponent, data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

在路由配置中，通过data参数定义静态的数据，可定义多个对象 {path:/product, component:ProductComponent, data:[{isProd:true}]}

在目标组建中接收参数 ActivatedRoute.data[0][isProd]

参数快照

this.productId = this.routeInfo.snapshot.params["id"];

参数订阅subscribe()

this.routeInfo.params.subscribe((params:Params)=>this.productId=params["id"]);