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

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

Dynamically inserted child components access in Angular 2.0

angular2-directives

angular