使用ngFor

Question

我想根据一些预定义的数组数据分别为每个标签分配组件。我试图通过在html模板中使用ngFor迭代来做到这一点。 但是目前我不能通过迭代器指定组件到div。有什么方法可以解决这个问题吗？

以下是我正在尝试做的事情。

• https://stackblitz.com/edit/angular-ranet6?file=app/tabs-overview-example.html

Answer 1

您可以通过自定义指令实现此功能，以引用元素 viewContainerRef

HTML

<mat-card>
  <mat-card-content>
    <mat-tab-group>
      <mat-tab *ngFor="let item of menulist[0].menus" [label]="item.label">
        <ng-container add-comp [comp]="item.component"></ng-container>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card> 

指令

import { Directive, Type, ViewContainerRef, Input, ComponentFactoryResolver } from '@angular/core';

@Directive({
  selector: '[add-comp]',
})
export class AddDirective {

  @Input('comp') comp : Type<any>
  constructor(public viewContainerRef: ViewContainerRef,
  public componentFactoryResolver:ComponentFactoryResolver) {

   }

   ngAfterViewInit(){
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.comp);
     this.viewContainerRef.clear();
     this.viewContainerRef.createComponent(componentFactory);
   }
}

请参阅堆栈闪电战链接，了解在component和main.ts文件中所做的更改 https://stackblitz.com/edit/angular-ranet6-m9pp7j?file=app%2FaddComp.directive.ts