Угловые вкладки материала с нестандартными компонентами

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/