Angular 角度2：是否可以在动态组件中绑定变量？

我试图在一个动态组件中绑定一个var，但是当这个var在父组件中更改时，这些更改不会到达子组件，正如我们将var绑定到一个固定组件时所发生的那样：

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

---

我创建了一个Plunker示例。

也许您可以从一个可观察对象生成一个流，然后在您的组件中订阅它，因此每次它更改时，您的组件都会相应地更新值：

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

---

希望这能有所帮助。

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

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

---

希望这有帮助。

您也必须通过更改。您可以在动态组件可以订阅的地方传递一个observable，以获得有关更改的通知。如果您可以接受手动更新，则将

this.componentRef.instance.selection=this.selection

在你的

changeSelection

方法的末尾。谢谢@Ibrahim，在本例中它会起作用，但有时其他组件中的var会发生变化，所以我不能这样做。要传递一个可观测值可能是一个解决方案，谢谢@Günter，你也必须传递这些变化。您可以在动态组件可以订阅的地方传递一个observable，以获得有关更改的通知。如果您可以接受手动更新，则将

this.componentRef.instance.selection=this.selection

在您的

changeSelection

方法的末尾。谢谢@Ibrahim，在本例中它会起作用，但有时其他组件中的var会发生变化，所以我不能这样做。传递一个可观测值可能是一个解决方案，谢谢@Günter

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