gpt4 book ai didi

angular - 如何从父组件访问子 routeParams?

转载 作者:太空狗 更新时间:2023-10-29 19:31:25 26 4
gpt4 key购买 nike

我有一个“项目”页面,无论您是查看项目列表还是查看单个项目,我都试图访问该页面,但不使用子组件。

考虑:

应用路由器配置

{ path: '/projects/...', component: ProjectCmp, name: 'Projects' },

然后是项目组件:

    { path: '/', useAsDefault:true,component: ProjectDashboardCmp, name: 'List' },
{ path: '/:id/', component: ProjectDashboardCmp, name: 'Dashboard' },
{ path: '/:id/shows', component: ShowCmp, name: 'Shows' },

如何获取传递给“仪表板”路由的“id”?它不是这个组件的参数,所以如果没有 child 启动它或服务,我无法访问它。

例如,在项目组件中:

constructor(public params: RouteParams) {
this.projectId = params.get('id');
console.log("The project Id is:",this.projectId);
//The Project Id is:null

但在 projectDashboardCmp 内部,它按预期工作。

问题是我做了类似的事情:

<router-outlet *ngIf="!this.projectId"></router-outlet>

在项目组件中,因此它永远不会加载子路由并直接死掉...

最佳答案

如果其他人对如何访问子路由参数感兴趣 - 这是解决方案(Angular 4.0):

// Inside ngOnInit() method of a parent component
this.route.children[0].params
.subscribe((childParams: Params) => this.projectId = +childParams['id']);

注意:this.route.children 可以有多个子路由。在我的例子中 - 它只有一个,所以我用 [0] 选择了它。

总的来说,我不推荐使用这种方法,除非你别无选择

关于angular - 如何从父组件访问子 routeParams?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35007415/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com