首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >将路由param从父路由传递到子路由

将路由param从父路由传递到子路由
EN

Stack Overflow用户
提问于 2017-02-15 18:24:17
回答 3查看 5.1K关注 0票数 5

我有这样的路线:

代码语言:javascript
复制
parent/:id
    |
    child
    |
    child

我可以通过以下方式从父组件获得param:

代码语言:javascript
复制
ngOnInit() {
  this.route.params.subscribe((params) => {
      this.id = +params['id'];
  });
}

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

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-02-15 21:45:45

不幸的是,没有访问父路由参数的简单方法,也没有改变它的#12767的计划,所以唯一的方法是使用服务或localStorage,不管你喜欢什么。

代码语言:javascript
复制
   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

票数 3
EN

Stack Overflow用户

发布于 2018-04-05 18:37:35

使用角路由器5(谁知道2?),您不会太远;有一个父对象也是ActivatedRoute。

在儿童路线上,你可以这样做:

代码语言:javascript
复制
ngOnInit() {
  this.route.parent.params.subscribe(params => {
    this.parentRouteId = +params["id"];
    console.log(this.parentRouteId);
  });
}

你的路线必须是这样的:

代码语言:javascript
复制
const routes: Routes = [
  {
    path: ':id',
    component: MyComponent,
    children: [
      { path: '', redirectTo: '/my-page' },
      { path: 'my-page', redirectTo: component: MyChildComponent }
    ]
  },
];
票数 9
EN

Stack Overflow用户

发布于 2021-02-05 20:35:49

这个问题还有另外一个答案,因为角5.2

代码语言:javascript
复制
RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})

您可以将设置传递到根RouterModule中,以告诉它始终从其父级继承。imho,这应该是默认的,但它不是。这将允许从所有祖先继承所有参数。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42257273

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档