[英]Angular Dynamic Components: @ViewChildren get ViewContainerRef for every component in QueryList
I am building a dialog with dynamic tabs that can receive a component to be placed in the tab body.我正在构建一个带有动态选项卡的对话框,可以接收要放置在选项卡正文中的组件。 I am having a hard time creating multiple dynamic components using @ViewChildren.
我很难使用@ViewChildren 创建多个动态组件。 I have successfully done this with a single component and @ViewChild in the past quite easily.
过去,我使用单个组件和 @ViewChild 很容易地成功完成了此操作。
Here is my template:这是我的模板:
<mat-tab *ngFor="let tab of tabs" [label]="tab.label">
<ng-template #comp></ng-template>
</mat-tab>
Here is my component logic:这是我的组件逻辑:
@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);
});
}
My dynComponents are undefined even when hard-coding components in the Template.即使在模板中对组件进行硬编码时,我的 dynComponents 也未定义。 I need to seemingly get the ViewContainerRef from this dynComponents QueryList, but I am not sure why it is not populating at all.
我似乎需要从这个 dynComponents QueryList 中获取 ViewContainerRef,但我不确定为什么它根本没有填充。 I used this post for reference: Post
我用这个帖子作为参考:帖子
The @ViewChildren
in the component is not working because it is missing the read
metadata property indicating ViewContainerRef
.组件中的
@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);
}
)
}
}
ps Dynamic content may be loaded using lifecycle hook AfterContentInit
or AfterViewInit
. ps 动态内容可以使用生命周期钩子
AfterContentInit
或AfterViewInit
。
In my project i do this to build dynamically the components:在我的项目中,我这样做是为了动态构建组件:
App Component应用组件
<div *ngFor="let field of fields">
<app-dynamic-component [field]="field" ></app-dynamic-component>
</div>
App-dynamic-component.ts 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应用动态组件.html
<ng-template dynamic-component></ng-template>
Finally my dynamic-component Directive最后我的动态组件指令
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamic-component]',
})
export class DynamicComponentDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.