Angular，从动态创建的组件中获取 ViewChild/ViewContainerRef

Question

有没有办法从动态创建的组件中获取 ViewContainerRef？我动态创建的组件内部有一个 ngContent 元素，我想在动态创建后填充它。

export class Example {

  @ViewChild('content', { read: ViewContainerRef }) //normal way
  content: ViewContainerRef;

...

  ngAfterViewInit(){
    let box1=this.content.createComponent(this.boxFactory);
    box1.instance.title="Dynamic (1)";
    // HERE: the box1 has a ng-content area which i want to fill.
  }

}

我考虑了一些手动方法来解析 ViewChild 而不是使用装饰器。一些想法？

非常感谢。

Answer 1

我也不确定如何动态添加 viewchild。但是，如果动态 ViewContainerRef 是您想要的，您可以尝试使用此解决方案:

在html文件中创建:

  <div id="test"></div>

在你的组件中创建:

 let nodeElement = document.getElementById("test");
      let compFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
      let component = compFactory.create(this.viewContainerRef.injector, null, nodeElement);