Question

我有一个＆＃34;项目＆＃34;我试图访问的页面是否正在查看项目列表或单个项目，但不使用子组件。

考虑：

App Router Config

{ 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' },

我如何获得＆＃34; id＆＃34;传递给＆＃34;仪表板＆＃34;路线？它不是这个组件的一个参数，所以我无法在没有孩子踢它或服务的情况下访问它。

示例，在projects组件中：

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>

在项目组件中，它不会加载子路径而只是死...

Answer 1

如果其他人对如何访问子路由参数感兴趣 - 这是解决方案（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]。

总的来说，我不建议使用这种方法，除非你别无选择

如何从父组件访问子routeParams？

1 个答案: