在Angular 2.0中动态插入子组件访问

Question

我正在使用this示例在我的应用中动态创建组件。

  export class App {
   @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
   private componentFactory: ComponentFactory<any>;

   constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
    this.componentFactory = componentFactoryResolver.resolveComponentFactory(HelloComponent);
  }

  addItem () {
    this.viewContainerRef.createComponent(this.componentFactory, 0);
  }
}

这是一个问题。由于这些组件被跟踪为@ContentComponents，我如何将数据注入此类组件？

我试着这样：

 @ContentChildren(TextComponent) components: QueryList<TextComponent>;

现在我成功获取了TextComponent的QueryList 然后我尝试这样的事情：

this.components.forEach(x => x.Message = "Content component");

并没有效果。

Answer 1

这应该这样做：

  addItem () {
    var cmpRef = this.viewContainerRef.createComponent(this.componentFactory, 0);
    cmpRef.instance.someProp = 'someValue';
    cmpRef.instance.someObservable.subscribe(val => this.val = val);
  }