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

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

类似的事情可能会起作用：

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

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

Answer 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>

Answer 3

您需要尝试使用以下标签：https://www.npmjs.com/package/@codehint-ng/tabs

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

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

3 个答案: