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

【问题标题】：Angular material tabs with custom components带有自定义组件的角材料选项卡
【发布时间】：2019-08-13 14:58:25
【问题描述】：

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

  <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 对象上添加一个组件，然后以某种方式将它从所述对象嵌入到这里？有没有一种体面的方法可以做到这一点，还是我必须为列表中的每个项目实际编写一个标签？

【问题讨论】：

你看angular.io/guide/dynamic-component-loader了吗？

标签： angular tabs angular-material mat-tab

【解决方案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>

【讨论】：

【解决方案2】：

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

这样的事情可能会奏效：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：