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