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

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

我会使用服务来解决这个问题。然后，所有子级和父级都可以设置该属性，并将更改传播给所有订阅者。首先，我将创建一个具有私有 BehaviorSubject 的服务，该服务具有公共 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，这样就可以订阅了。

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

如果某些孩子或父母更新了属性：

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

所有订阅者都会知道。

Answer 2

目前您无法绑定到路由器添加的组件。改用共享服务（这里已经有大量关于 SO 的示例）从添加的组件传递数据或向其传递数据或订阅事件。

另请参阅此问题https://github.com/angular/angular/issues/4452 尤其是此评论https://github.com/angular/angular/issues/4452#issuecomment-153889558

Answer 3

如果你的数据是不可变的，你可以使用RouteData。

@Component({...})
@RouteConfig([
    { path: '/contact', name: 'Contact', component: ContactComponent, data: {num: 123}},
 ])
export class AppComponent {
}

@Component({...})
export class ContactComponent {
   public num:Number;
   constructor(data: RouteData) {
     this.num = data.get('num');
   }
}

传递一些您不想在子路由中硬编码的配置选项可能很有用。但如果您希望数据发生变化，则需要其他方法。