我找到的所有教程和答案都只显示了如何使用输入将变量从父组件传递给子组件,但是这个子组件包含在路由器出口中而不是直接在父模板中？
例如：@H_404_2@
主要部分@H_404_2@
@Component({
selector: 'my-app',template: `
Main page
<router-outlet></router-outlet>
`,directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/contact',name: 'Contact',component: ContactComponent},])
export class AppComponent{
public num:Number = 123;
}
@Component({
selector: 'contact-page',template: 'contact page'
})
export class ContactComponent{
public num:Number;
}
因此,在此示例中,主组件模板包含一个路由器插座,其中将呈现子接触组件,但如何在父组件组件的路由器插座内评估的子组件中获取变量“num”值？@H_404_2@
我只是偶然发现了这个问题,这就是我如何解决类似的问题.
我会用一个服务来解决这个问题.然后,所有子项和父项都可以设置该属性,并为所有订阅者传播更改.首先,我将创建一个具有私有BehaviorSubject的服务,该服务具有公共getter和setter,以封装ReplaySubject并仅返回Observable：@H_404_2@
private _property$: BehaviorSubject<number> = new BehaviorSubject(1);
set property(value: number) {
this._property$.next(value);
}
get property$(): Observable<number> {
return this._property$.asObservable();
}
使用新的BehaviorSubject(1)的原因是将初始值设置为1,因此可以订阅.@H_404_2@
在父onInit中,我会选择property(num)的默认值：@H_404_2@
private _propertySubscribtion: Subscription
ngOnInit() {
// set default value to 5
this._componentService.property = 5;
// If property is updated outside parent
this._componentService.property$.subscribe(p => {
this.property = p;
});
}
ngOnDestroy() {
this._propertySubscribtion.unsubscribe();
}
private _propertySubscribtion: Subscription
ngOnInit() {
this._propertySubscribtion = this._componentService.property$.subscribe(p => {
this.property = p;
});
}
ngOnDestroy() {
this._propertySubscribtion.unsubscribe();
}
如果某个孩子或父母更新了该财产：@H_404_2@
updateProperty() {
// update property
this._componentService.property = 8;
}
