Question

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

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组件中导航ActivatedRoute来访问GrandChildren和this.route.snapshot.params['childId']参数值ID必须遍历路由树。

正在回答这个问题...

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

我只需要访问父ID和子ID，只要它们在URL中即可，无论哪个控件具有控制权。

Answer 1

您可以在route变量中获取url参数

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

Answer 2

您可以通过firstChild访问子路由，因此（取决于您的路由配置），它看起来可能像这样：

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

Answer 3

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

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

其中route被注入ActivatedRoute 来自文档

params-包含必需和可选的Observable 特定于路线的参数。请改用paramMap。

之所以对您不起作用，是因为标头（父级）的创建时间与子组件的创建时间不同，因此路由快照就像这样-从创建标头的那一刻起创建路由快照。

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

3 个答案: