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

Posted 2023-02-23

【中文标题】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

【参考方案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;
    );

希望这会有所帮助。