如何从子组件中访问映射到父组件的路由参数？（角度 2.0）答案

【问题标题】：How do I access route parameters that are mapped to a parent component from within a child component? (angular 2.0)如何从子组件中访问映射到父组件的路由参数？（角度 2.0）
【发布时间】：2016-12-22 17:39:04
【问题描述】：

我正在使用 angular 2 来定义一些路线。

我的路线设置如下所示。

const routes: Routes = [
    { path : ':id', component : ParentComponent, 
      children : [
          { path : '', redirectTo: 'metadata', pathMatch : 'full' }
          { path : 'metadata', component : MetadataDisplayComponent },
          { path : 'data', component : DataDisplayComponent }    
      ]
    }   
]

当我尝试访问 ParentComponent 中的“id”参数时，一切正常。

// ParentComponent

ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
        this.path = params['id'];
        console.log(this.path);   // logs the value of ":id" 
    });
}

但是，尝试从子组件“DataDisplayComponent”中访问相同的参数会导致未定义的结果。

// DataDisplayComponent

ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
        this.path = params['id'];
        console.log(this.path);   // logs "undefined" 
    });
}

有没有办法在子组件内部操作时干净地抓取映射到父组件的路由参数？我曾考虑过使用消息传递来告诉子组件，但这似乎是一个有点混乱的解决方案。想法？

【问题讨论】：

标签： angular parameters routing angular-components

【解决方案1】：

我觉得自己很蠢。

我需要

this.sub = this.route.parent.params.subscribe(params => {

This 链接将我引导到正确的位置。可能重复。

【讨论】：

【解决方案2】：

从 Angular 5.2.x 开始，路由器现在有一个新选项 paramsInheritanceStrategy。

您可以将这个设置设置为RouterModule，您只需订阅this.route.params.subscribe即可获取每个组件的所有参数

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, {
        paramsInheritanceStrategy: 'always' // THIS PARAM
    })]
})

这是一个全局配置
注意同名参数

【讨论】：