components - Angular 2如何将变量从父组件传递到路由器导出

Question

我找到的所有教程和答案都只展示了如何使用输入将变量从父组件传递到子组件，但是这个子组件包含在路由器导出中而不是直接包含在父模板中是什么？？

例如:

主要成分

@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”值？？

Answer 1

我只是偶然发现了这个问题，这是我解决类似问题的方法。

我会使用服务来解决这个问题。然后所有的 child 和 parent 都可以设置该属性，并且更改会传播到所有订阅者。首先，我将创建一个具有私有(private) BehaviorSubject 的服务，该服务具有公共(public) getter 和 setter，以封装 ReplaySubject 并仅返回 Observable:

private _property$: BehaviorSubject<number> = new BehaviorSubject(1);

set property(value: number) {
    this._property$.next(value);
}

get property$(): Observable<number> {
    return this._property$.asObservable();
}

之所以使用new BehaviorSubject(1)，是为了将初始值设置为1，所以有订阅的东西。

在 parent 的onInit中，我会选择属性的默认值(num):

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();
}

如果某个 child 或 parent 更新了属性:

updateProperty() {
    // update property
    this._componentService.property = 8;
}

所有订阅者都会知道。