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"]);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！