1

我有一个用于创建材料选项卡的对象列表，如下所示：

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

4

3 回答 3

2

您可以使用 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>
于 2019-03-22T15:52:53.460 回答
1

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

像这样的东西可能会起作用：

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

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

于 2019-03-22T15:41:05.640 回答
0

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

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

于 2020-03-20T16:50:06.157 回答