通常，當(dāng)用戶導(dǎo)航你的應(yīng)用時(shí)，你會(huì)希望把信息從一個(gè)組件傳遞到另一個(gè)組件。例如，考慮一個(gè)顯示雜貨商品購(gòu)物清單的應(yīng)用。列表中的每一項(xiàng)都有一個(gè)唯一的 id。要想編輯某個(gè)項(xiàng)目，用戶需要單擊“編輯”按鈕，打開一個(gè) EditGroceryItem 組件。你希望該組件得到該商品的 id，以便它能向用戶顯示正確的信息。

你也可以使用一個(gè)路由把這種類型的信息傳給你的應(yīng)用組件。要做到這一點(diǎn)，你可以使用 ActivatedRoute 接口。

要從路由中獲取信息：

1. 把 ActivatedRoute 和 ParamMap 導(dǎo)入你的組件。

    //In the component class (excerpt)


    import { Router, ActivatedRoute, ParamMap } from '@angular/router';

這些 import 語(yǔ)句添加了組件所需的幾個(gè)重要元素。要詳細(xì)了解每個(gè) API，請(qǐng)參閱以下 API 頁(yè)面：

• Router

• ActivatedRoute

• ParamMap

1. 通過把 ActivatedRoute 的一個(gè)實(shí)例添加到你的應(yīng)用的構(gòu)造函數(shù)中來(lái)注入它：

//In the component class (excerpt)


constructor(
  private route: ActivatedRoute,
) {}

1. 更新 ngOnInit() 方法來(lái)訪問這個(gè) ActivatedRoute 并跟蹤 id 參數(shù)：

//In the component (excerpt)


ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.name = params['name'];
  });
}

注：

• 前面的例子使用了一個(gè)變量 name，并根據(jù) name 參數(shù)給它賦值。