带有自定义组件的角形材料选项卡

Question

我有一个用于创建材质选项卡的对象列表：

  <mat-tab-group>
    <mat-tab *ngFor="let tripOption of tripOptions">
      <ng-template mat-tab-label>
        <mat-icon class="svg-frq-light-blue new-trip-image" svgIcon="{{tripOption.name}}"></mat-icon>
      </ng-template>

        //component would go here

    </mat-tab>
  </mat-tab-group>

我需要为每个选项卡添加一个单独的角度组件。 有没有办法让我可以在每个 tripOption 对象上添加一个组件，然后以某种方式将它从所述对象嵌入到这里？ 有没有一种体面的方法可以做到这一点，还是我必须为列表中的每个项目实际编写一个选项卡？

Answer 1

您可以使用 Angular 原生 ngSwitch 根据您的业务逻辑将不同的组件附加到每个选项卡，然后将公共部分排除在 ngSwitch 之外。 类似的东西：

<mat-tab-group>
    <mat-tab *ngFor="let tripOption of tripOptions">
        <ng-template mat-tab-label>
            <mat-icon class="svg-frq-light-blue new-trip-image" svgIcon="{{tripOption.name}}"></mat-icon>
        </ng-template>

        <h1>Common code</h1>
        <ng-container [ngSwitch]="tripOption.name">
            <app-brazil-trip *ngSwitchCase="'Brazil'"></app-brazil-trip>
            <app-indonesia-trip *ngSwitchCase="'Indonesia'"></app-indonesia-trip>
            <app-chile-trip *ngSwitchCase="'Chile'"></app-chile-trip>
            <span *ngSwitchDefault>Trip not found!</span>
        </ng-container>
    </mat-tab>
</mat-tab-group>

Answer 2

在组件中使用具有某些逻辑的 innerHTML 绑定。

像这样的事情可能会奏效：

<div [innerHTML]="myComponentStr(tripOption.id)"></div>

更多信息： https : //alligator.io/angular/innerhtml-binding-angular/

Answer 3

你需要试试这个标签， https://www.npmjs.com/package/@codehint-ng/tabs

此控件允许灵活且单独地放置选项卡的内容