订阅Angular 2

Question

我在主/详细视图中遇到路由问题。如果我转到路线/master，InfoComponent应显示一些常规信息。如果我转到/master/1，则DetailsComponent应显示ID为1的项目的一些数据。在这两种情况下，MasterComponent都应显示所选的ID或无。

我可以很好地使用它。但问题是，我想订阅:id中OnInit中选定的MasterComponent，以便我可以在那里突出显示，如下所示：

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

但是，由于:id是子路径参数，因此无法正常工作。我无法使用this.route.firstChild，因为firstChild将是另一条路线，具体取决于InfoComponent或DetailsComponent是否正在显示。

在显示两个子组件之间:id发生变化时，我是否可以获得一个可观察的（MasterComponent）更改？

这是我的路由模块：

@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，1如果路线为/master/1，则值为null，如果路线为/master则为<foo><bar> foobar </bar></foo> }。

Answer 1

无论

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

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