路由傳值

路由傳遞參數

寫法

<a [routerLink]="['/']" [queryParams]="{id:1}">主頁</a>

<!--  使用查詢 參數  [queryParams]={} 傳遞數據-->

url

http://127.0.0.1:4200/?id=1

取值

this.activatedRoute.snapshot.queryParams['id']

路由路徑中傳遞參數

 {path: 'product/:id', component: ProductComponent},
  /**
   * 修改路由 使其可以攜帶參數
   */
<a [routerLink]="['/product',1]">商品詳情</a>

this.route.navigate(['/product', 2]);

link  值的數組中 填充要傳遞的值

url

http://127.0.0.1:4200/product/1

取值

 this.activatedRoute.snapshot.params['id'];
  ```


## 參數訂閱 使用鏡像時只創建一次  但是使用訂閱的時候是創建一個訂閱對象,當觀察對象狀態發生改變的時候訂閱者接受改變的值

this.activatedRoute.params.subscribe((p: Params) => console.log(p[‘id’]));


> 路由配置中傳遞數據

使用data 參數定義靜態的對象 配置靜態數據

獲取數據 this.activatedRoute.data.forEach(x => console.log(x));

可能存在與 在路由路徑中傳遞參數衝突
“`

發佈了237 篇原創文章 · 獲贊 12 · 訪問量 14萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章