如何从任何 Angular 组件访问 URL 参数？答案

【问题标题】：How to access the URL parameters from any Angular component?如何从任何 Angular 组件访问 URL 参数？
【发布时间】：2018-07-05 20:15:13
【问题描述】：

我有一个应用程序，其组件结构如下：

1. Fam.Component
1.1. Header.Component <------ Unable access param from here
1.2. ParentGrid.Component
1.2.1. ChildGrid.Component
1.2.1.1 GrandChildGrid.Component <----- Can access from here!!

单击父网格中的项目，将加载与该项目相关的子网格。

在大子级别，我的浏览器 URL 如下所示：

http://onebigfamily.com/Fam/Parents/1/Children/23/GrandChildren

这将基本上显示第一个父母的第 23 个孩子的所有孙辈。

我的路由配置中此 URL 的路径如下所示：

Fam/Parents/:parentId/Children/childId:/GrandChildren

我可以访问childId 和parentId 参数值，方法是从我的GrandChildren 组件中导航ActivatedRoute，方法是执行一个简单的this.route.snapshot.params['childId']（当然对于父ID 必须遍历路由树）。

现在问题...

如何从我的标题组件访问:childId 和:parentId？当我执行this.route.snapshot.params['childId'] 时，这些值显示为未定义？

我只需要访问父ID和子ID，只要它们在URL中，不管哪个组件有控制权。

【问题讨论】：

你读过关于路由的 Angular 文档吗？它在那里解释得很好

标签： angular angular-router angular-activatedroute

【解决方案1】：

您可以通过firstChild 访问子路由，因此（取决于您的路由配置），它可能如下所示：

this.route.snapshot.firstChild.firstChild.params['childId']

【讨论】：

【解决方案2】：

可以在路由变量中获取url参数

this.route.params.subscribe(params => {
                var parentId = params['parentId'];
                var childId = params['childId'];
 });

【讨论】：

我的问题是关于从单独的组件中执行此操作。

【解决方案3】：

由于您要检查与@您的标头创建时间不同的路由参数，因此您必须订阅路由更改并从更改事件中获取参数。在您的标头组件中，您必须这样做：

  this.route.paramMap
    .subscribe(params => {
         //assign params here
    });

route 注入的位置ActivatedRoute 来自文档

params——一个包含必需和可选参数的 Observable 特定于路由的参数。请改用 paramMap。

它不适合您的原因是因为您的标头组件（父组件）与您的子组件具有不同的创建时间，所以路由快照就是这样 - 从创建标头的那一刻开始的路由快照。

【讨论】：