目前,我可以动态加载单个组件并将其显示在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
不允许添加新元素或类似于createComponent
上的ViewChild
创建它们。
如何创建动态组件并将其添加到ViewChildren
?
答案 0 :(得分: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);
});
});
}
}