Angular9 獲取路由信息

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

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

要從路由中獲取信息：

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

    //In the component class (excerpt)


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

這些 import 語句添加了組件所需的幾個重要元素。要詳細了解每個 API，請參閱以下 API 頁面：

• Router

• ActivatedRoute

• ParamMap

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

//In the component class (excerpt)


constructor(
  private route: ActivatedRoute,
) {}

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

//In the component (excerpt)


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

注：

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