将路由参数从父路由传递到子路由

Question

我的路线结构如下：

parent/:id
    |
    child
    |
    child

我可以通过以下方式从父组件获取参数：

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

然后以某种方式将其作为输入附加到<router-output> 上？还是我必须像对待父母一样从每个孩子那里提取价值？

将id 参数从父组件传递给所有子组件的最佳方法是什么？

Answer 1

使用 Angular 路由器 5（谁知道 2？），您不会走得太远；有一个父对象也是一个 ActivatedRoute。

在子路由中，可以这样获取：

ngOnInit() {
  this.route.parent.params.subscribe(params => {
    this.parentRouteId = +params["id"];
    console.log(this.parentRouteId);
  });
}

您的路线必须这样定义：

const routes: Routes = [
  {
    path: ':id',
    component: MyComponent,
    children: [
      { path: '', redirectTo: '/my-page' },
      { path: 'my-page', redirectTo: component: MyChildComponent }
    ]
  },
];

Answer 2

自 Angular 5.2 以来，这个问题还有另一个答案

RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})

您可以将设置传递给您的根 RouterModule 以告诉它始终从其父级继承。恕我直言，这应该是默认设置，但事实并非如此。这将允许从所有祖先继承所有参数。

Answer 3

不幸的是，没有简单的方法可以访问父路由参数，也没有计划更改它#12767，所以唯一的方法是使用 service 或 localStorage 来解决，无论你喜欢什么。

   class Service {
        public params:Subject<any> = new Subject<any>();

        public next(params):void { this.params.next(params); }
   }

   class Parent {
        constructor(service:Service, route:ActivatedRoute){
             activatedRoute.params.subscribe(params => service.next(params));
        }
   }

   class Child {
        constructor(service:Service){
             service.params.subscribe(params => console.log(params));
        }
   }

以下是组件可以相互通信的一些方式： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service