订阅Angular 2中主/详细示例中的子路径更改

2019年7月28日 193次阅读

我在主/详细视图中遇到路由问题.如果我去路线/主人,InfoComponent应该显示一些一般信息.如果我转到/ master / 1,DetailsComponent应显示id为1的项目的一些数据.在这两种情况下,MasterComponent都应该显示所选的id或什么都不显示.

我可以让这个工作得相当好.但问题是我想在MasterComponent中订阅OnInit中的selected：id,以便我可以在那里突出显示它,如下所示：

this.selectedId = this.route.params.map((params: Params) => params["id"])

但这不起作用：id是子路径参数.而且我不能使用this.route.firstChild,因为firstChild将是另一条路径,具体取决于InfoComponent或DetailsComponent是否显示.

当MasterComponent在显示两个子组件之间发生变化时,我可以获得一个可观察的(of：id)吗？

这是我的路由模块：

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: "master",
                canActivate: [AuthenticationGuardService],
                children: [
                    {
                        path: "",
                        component: MasterComponent,
                        children: [
                            {
                                path: "",
                                component: InfoComponent
                            },
                            {
                                path: ":id",
                                component: DetailsComponent
                            }
                        ]
                    }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})
export class MyRoutingModule { }

所以我想要做的事情是这样的：

this.selectedId = this.route.params.map((params: Params) => params["id"])

其中this.selectedId是一个Observable,如果路由是/ master / 1则值为1,如果路由是/ master,则值为null.

最佳答案 或

this.route.firstChild.params.map(...)

或使用共享服务将params更改从子级传递给父级.有关示例,请参见https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service.

点赞