Angular 2：是否可以在动态组件中绑定 var？答案

【问题标题】：Angular 2: is it possible to bind a var in a Dynamic Component?Angular 2：是否可以在动态组件中绑定 var？
【发布时间】：2017-02-06 08:01:25
【问题描述】：

我正在尝试在动态组件中绑定一个 var，但是当这个 var 在父组件中发生更改时，更改不会到达子组件，因为当我们将 var 绑定到固定组件时会发生这种情况：

<child-component [myVar]="myVar"><child-component>

我正在尝试使用以下属性实例来执行此操作，但它不起作用，它只传递原始值而不是更改：

this.componentRef.instance.myVar = this.myVar;

我创建了一个 Plunker 示例，Example in Plunker。

【问题讨论】：

您也必须通过更改。您可以传递动态组件可以订阅的可观察对象，以获取有关更改的通知。
如果您可以接受手动更新，请将this.componentRef.instance.selection = this.selection; 放在changeSelection 方法的末尾。
感谢@Ibrahim，在示例中它可以工作，但有时其他组件中的 var 会发生变化，所以我不能这样做。
传递一个 observable 可能是一个解决方案，谢谢@Günter

标签： angular dynamic data-binding components

【解决方案1】：

也许您可以从 observable 创建一个流，然后在您的组件中订阅它，因此每次它更改您的组件都会相应地更新值：

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class ViewToggleService {
  leftVisible:boolean=true;
  // Observable boolean source
  private leftVisibleSource = new Subject<boolean>();
  // Observable boolean stream
  leftVisibleStream$=this.leftVisibleSource.asObservable();
  constructor(){
  }
  // service command
  toggleView(viewName:string){    
      if(viewName.toString()==='leftVisible'){
         this.leftVisible=!this.leftVisible;
         this.leftVisibleSource.next(this.leftVisible);
      }
  }
}

然后在您的根级别注入此服务后，您可以在组件内部订阅此流：

public leftVisible: boolean;
subscriptionLeftVisible: Subscription;
ngOnInit() {    
    this.subscriptionLeftVisible = this._viewToggleService.leftVisibleStream$.subscribe(leftVisible => {
        this.leftVisible = leftVisible;
    });
}

希望这会有所帮助。

【讨论】：