角度动态组件：@ViewChildren为QueryList中的每个组件获取QueryList
角度动态组件：@ViewChildren为QueryList中的每个组件获取QueryList
提问于 2019-08-29 22:06:33
我正在构建一个带有动态选项卡的对话框，它可以接收要放置在选项卡主体中的组件。我很难使用@ViewChildren创建多个动态组件。我在过去很容易地用一个组件和@ViewChild成功地做到了这一点。
这里是我的模板：
<mat-tab *ngFor="let tab of tabs" [label]="tab.label">
<ng-template #comp></ng-template>
</mat-tab>这里是我的组件逻辑：
@ViewChildren("comp") dynComponents: QueryList<any>;
public ngAfterContentInit() {
this.tabs.forEach(tab => {
const factory = this._resolver.resolveComponentFactory(tab.component);
console.log(this.dynComponents); // Returns undefined.
// this.componentRef = this.vcRef.createComponent(factory);
});
}即使在模板中硬编码组件时，我的dynComponents也是未定义的。我似乎需要从这个ViewContainerRef dynComponents QueryList中获得它，但是我不知道为什么它根本没有被填充。我参考了这篇文章：Post
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-30 03:45:42
组件中的@ViewChildren无法工作，因为它缺少指示ViewContainerRef的read元数据属性。
组件
import {
AfterContentInit, Component, ComponentFactoryResolver, QueryList, Type, ViewChildren, ViewContainerRef
} from '@angular/core';
@Component({
selector: 'dynamic-dialog',
templateUrl: './dynamic-dialog.component.html',
styleUrls: ['./dynamic-dialog.component.scss']
})
export class DynamicDialogComponent implements AfterContentInit {
@ViewChildren('comp', { read: ViewContainerRef })
public dynComponents: QueryList<ViewContainerRef>;
public tabs = [];
constructor(private _resolver: ComponentFactoryResolver) {}
ngAfterContentInit() {
this.dynComponents.map(
(vcr: ViewContainerRef, index: number) => {
const factory = this._resolver.resolveComponentFactory(
this.tabs[index].component);
vcr.createComponent(factory);
}
)
}
}附注：动态内容可以使用生命周期挂钩AfterContentInit或AfterViewInit加载。
Stack Overflow用户
发布于 2019-08-30 01:04:30
在我的项目中，我这样做是为了动态地构建组件：
App组件
<div *ngFor="let field of fields">
<app-dynamic-component [field]="field" ></app-dynamic-component>
</div>App-dynamic-component.ts
@ViewChild(DynamicComponentDirective, {static: true}) adHost: DynamicComponentDirective;
...
loadComponent() {
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(this.field.component);
const componentRef = <any>viewContainerRef.createComponent(componentFactory);
}App-dynamic-component.html
<ng-template dynamic-component></ng-template>最后我的动态组件指令
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamic-component]',
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57721310
复制相关文章
相似问题
腾讯云开发者
