Angular9 获取路由信息

通常，当用户导航你的应用时，你会希望把信息从一个组件传递到另一个组件。例如，考虑一个显示杂货商品购物清单的应用。列表中的每一项都有一个唯一的 id。要想编辑某个项目，用户需要单击“编辑”按钮，打开一个 EditGroceryItem 组件。你希望该组件得到该商品的 id，以便它能向用户显示正确的信息。

你也可以使用一个路由把这种类型的信息传给你的应用组件。要做到这一点，你可以使用 ActivatedRoute 接口。

要从路由中获取信息：

1. 把 ActivatedRoute 和 ParamMap 导入你的组件。

    //In the component class (excerpt)


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

这些 import 语句添加了组件所需的几个重要元素。要详细了解每个 API，请参阅以下 API 页面：

• Router

• ActivatedRoute

• ParamMap

1. 通过把 ActivatedRoute 的一个实例添加到你的应用的构造函数中来注入它：

//In the component class (excerpt)


constructor(
  private route: ActivatedRoute,
) {}

1. 更新 ngOnInit() 方法来访问这个 ActivatedRoute 并跟踪 id 参数：

//In the component (excerpt)


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

注：

• 前面的例子使用了一个变量 name，并根据 name 参数给它赋值。