有3種方式

1、在查詢參數中傳遞數據

2、在路由路徑中傳遞數據

定義路由路徑時就要指定參數名字，在實際路徑中攜帶參數。

3、在路由配置中傳遞數據

一、在查詢參數中傳遞數據

第一步：修改模版中商品詳情鏈接，帶一個指令queryParams

商品詳情

效果：點擊鏈接會傳一個商品id為1的參數過去。

第二步：在商品詳情組件中接收參數

用ActivatedRoute接收id并賦值給productId顯示在模版中。

import { Component, OnInit } from '@angular/core';import { ActivatedRoute } from '@angular/router';

@Component({

selector:'app-product',

templateUrl:'./product.component.html',

styleUrls: ['./product.component.css']

})

exportclass ProductComponent implementsOnInit {privateproductId: number;

constructor(privaterouteInfo: ActivatedRoute) { }

ngOnInit() {this.productId = this.routeInfo.snapshot.queryParams["id"];

}

}

修改模版顯示

這里是商品信息組件

商品id是{{productId}}

二、?在路由路徑中傳遞數據

第一步：修改路由path屬性使其可以攜帶數據

{ path: 'product/:id', component: ProductComponent },

第二步：修改路由鏈接的參數來傳遞數據

傳一個2過去。

商品詳情

效果：

第三步，商品詳情信息組件，從url中取id

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

三、參數快照和參數訂閱

1、參數快照問題

參數快照就是從snapshot中獲取參數。

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

修改：

商品詳情按鈕的響應函數，傳遞一個3過去。

toProductDetails(){this.router.navigate(['/product',3]);

}

問題：

先點主頁，再點商品詳情鏈接正確跳轉到商品詳情組件，再點商品詳情按鈕，問題來來，url中id變為來3，內容顯示中id沒有變還是2。

原因：

從home組件路由到component組件，商品詳情組件會被創建，它的constructor(),ngOnInit()會被調用一次。

但是從商品詳情組件直接路由到商品詳情，由于商品詳情組件在點擊商品詳情按鈕時已經被創建了，它不會再次被創建，ngOnInit()方法不會再次被創建。所以productId依然保存著第一次被創建時候的值。

解決辦法：參數訂閱。

2、參數訂閱

rxjs的subscribe方法。

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

}

問題得以解決。

獲取路由參數時候：

確定一個組件不會從自身路由到自身，可以通過參數快照方式獲取參數。

不確定，則用參數訂閱方式獲取。

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/9006185.html?有問題歡迎與我討論，共同進步。

總結

以上是生活随笔為你收集整理的angular路由传递参数_Angular路由——在路由时候传递数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。