Question

我正在构建一个带有动态选项卡的对话框，该对话框可以接收要放置在选项卡主体中的组件。我很难使用@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也未定义。我似乎需要从此dynComponents QueryList中获取ViewContainerRef，但我不确定为什么它根本没有填充。我将此帖子用作参考：Shi-Tomasi algorithm

Answer 1

在我的项目中，我这样做是为了动态构建组件：

应用组件

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

Answer 2

该组件中的@ViewChildren不起作用，因为它缺少指示read的{{1}}元数据属性。

组件

ViewContainerRef

p.s。可以使用生命周期挂钩AfterContentInit或AfterViewInit来加载动态内容。

角动态组件：@ViewChildren为QueryList中的每个组件获取ViewContainerRef

2 个答案:

组件