动态加载组件Angular 2

Question

我正在尝试动态加载组件数组。我有一个数组，其中包含运行时需要加载的所有组件。下面的代码循环遍历数组并为组件创建工厂。 `

gAfterViewInit() {
      this.loadcomponents();
  }
loadcomponents() {
      for (let i = 0; i < this.components.length; i++) {
          //this.sidetext[i] = this.components[i].sidetext;
          //this.section_ttile[i] = this.components[i].section_ttile;
          for (let j = 0; j < this.components[i].components.length; j++) {
              let termItem = this.components[i].components[j];
              let componentFactory = this.componentFactoryResolver.resolveComponentFactory(termItem.component);
              let viewContainerRef = this.termHost.viewContainerRef;
              viewContainerRef.clear();
              let componentRef = viewContainerRef.createComponent(componentFactory);
              (<TermComponent>componentRef.instance).data = termItem.data;
          }
      }

` 这是我的模板

            <div class="div_for_ques" *ngFor="let component of components; let i=index">

                <div class="sec_two">
                    <ng-template term-host></ng-template>
                </div>
            </div>

但问题是动态加载的组件出现在先前加载的组件组件之上。我希望每个组件都在一个独立的div中。有关如何实现这一目标的任何建议？ 以下是当前输出。

预期输出是两个这样的输入字段，但它只是第二个，它实际上完全重叠了第一个。

Answer 1

您需要使用@ViewChildren，以便获得容器的查询列表。

您的模板可能是这样的：

<div *ngFor="let v of views">
   <div #target></div>
</div>

您的代码将实例化这样的组件：

@ViewChildren('target', {read: ViewContainerRef}) container: QueryList<ViewContainerRef>;

ngAfterViewInit(){
  this.container.toArray().map((viewContainerRef, i) => {
    let componentFactory = this.resolver.resolveComponentFactory(this.components[i]); // actually that should be this.components[i].components[j] something in your case
    let componentRef = viewContainerRef.createComponent(componentFactory);
  });
}