将动态组件添加到 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不允许添加新元素或创建类似于createComponentonViewChild元素。

如何创建动态组件并将它们添加到ViewChildren？

Answer 1

您可以使用 ViewChildren 从视图 DOM 中获取元素或指令的 QueryList。每当添加、删除或移动子元素时，查询列表都会更新，并且查询列表的可观察更改将发出新值。这意味着您可以创建事件订阅并使用ComponentFactoryResolverviewRefs.changes动态加载组件。请参阅下面的示例：

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