前言

路由時傳遞引數有什麼意義呢？舉個簡單的例子，我們進入了某寶或某東，點選了某個商品之後會指定跳轉到相應的頁面，這個時候我們知道在我們點選商品時候頁面進行了跳轉，從商品陳列頁面到了商品詳情頁面，為什麼正好能調到我們點選的那個商品頁面呢，因為路由在跳轉時傳遞了點選商品的資料。那麼它就是怎麼實現傳遞引數呢？

方式

路由傳遞資料的方式有三種，分別是

1. 在查詢引數中傳遞資料
2. 在路由路徑中傳遞資料
3. 在路由配置中傳遞資料

方式一：在查詢引數中傳遞

1.在app.component.html中, 編輯queryParams

<a [routerLink]="['/product']"
 
 [queryParams]="{id:1}">商品詳情</a>
2.儲存後會發現我們的路由地址已經發生了變化，多了個id=1的引數

2.上一步傳了引數之後，這一步需要在商品詳情元件的product.component.ts中接收引數。這裡就用到了上篇部落格中我們提到的第五個物件ActivatedRoute。
name如何獲得ActivatedRoute的引數呢，我們需要先在建構函式中注入。

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router"
 
;
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
private productId:number; //宣告一個變數來接收路由傳遞過來的productId
//定義一個構造方法，注入ActivatedRoute引數
constructor(private routeInfo: ActivatedRoute) { }
ngOnInit() {
this
 
.productId=this.routeInfo.snapshot.queryParams["id"];  //通過引數快照獲得傳遞過來的id引數的值，然後賦給了productId
  }
}

3.通過插值表示式把ts裡面接收到的路由引數ProductComponent物件本身的product屬性在頁面上顯示

<p>
這裡是商品詳情元件！
</p>
<!-- 通過插值表示式把ts裡面接收到的路由引數ProductComponent物件本身的product屬性在頁面上顯示 -->
<p>
商品ID是:{{productId}}
</p>

效果展示

總結

關於通過查詢引數傳遞路由資料的demo展示到這裡，下篇文章分享在URL中傳遞引數。未完待續，感謝您的閱讀……