angular - 向 ViewChildren 添加动态组件
问题描述
目前,我可以动态加载单个组件并将其显示在 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
on 的元素ViewChild
。
如何创建动态组件并将它们添加到ViewChildren
?
解决方案
您可以使用 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);
});
});
}
}
推荐阅读
- c# - 如何不使用 DeveloperExceptionPageMiddleware
- python - 您如何选择将基于索引的信息放入 pandas DataFrame 的位置?
- kubernetes - ansible 动态库存 Kubernetes
- reactjs - 用 Babel.Transform 反应 SSR
- javascript - 在导入 ES6 模块之前定义全局变量
- google-assistant-sdk - google-auth-oauthlib 不是内部或外部命令、可运行程序或批处理文件
- mapping - 如何创建多行字符串 sf 对象以在 Leaflet 地图中创建时间滑块
- llvm - “ld:找不到-lLLVMExtensions”是什么意思?
- c++ - 创建按总和排序的所有可能组合
- r - 使用 pivot_longer 以及数字和字符数据的混合从宽到长