将动态组件添加到ViewChildren

Question

目前，我可以动态加载单个组件并将其显示在ViewChild中，如下所示：

@Component({
   selector: '...',
   template: '<ng-container #viewRef></ng-container>'
})
export class SomeComponent {
@ViewChild('viewRef', {read: ViewContainerRef}) public viewRef;

  constructor(private compiler: Compiler) {}

  ngAfterViewInit() {
    this.compiler.compileModuleAndAllComponentsAsync(SomeModule).then((factory) =>  {
      this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

现在我想加载多个组件，并在列表中动态显示它们。ViewChildren应该是这个问题的解决方案。问题是，ViewChildren不允许添加新元素或创建类似于ViewChild上的createComponent的元素。

如何创建动态组件并将其添加到ViewChildren

Answer 1

您可以使用ViewChildren从视图DOM中获取元素或指令的QueryList。任何时候添加、删除或移动子元素时，查询列表都将更新，并且查询列表的可观察到的更改将发出新值。这意味着您可以在viewRefs.changes事件上创建订阅，并使用ComponentFactoryResolver动态加载组件。如下例所示：

export class SomeComponent {
    @ViewChildren('viewRef', {read: ViewContainerRef})
    public viewRefs: QueryList<ViewContainerRef>;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngAfterViewInit() {
        this.viewRefs.changes.subscribe((list: QueryList<ViewContainerRef>) => {
            list.forEach((viewRef: ViewContainerRef, index: number) => {
                const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(OtherComponent);
                viewRef.createComponent(componentFactory, index);
            });
        });
    }
}