Блог

У меня есть список объектов, которые я использую для создания вкладок материалов как таковых:

   <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, а затем каким-то образом внедрить его сюда из указанного объекта?
Есть ли достойный способ сделать это или мне действительно нужно написать вкладку для каждого элемента в списке?

Вы могли бы использовать собственный ngSwitch от Angular для добавления различных компонентов к каждой вкладке в соответствии с вашей бизнес-логикой, а затем исключить общие части из 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>
  

Используйте привязку innerHTML с некоторой логикой в вашем компоненте.

Может сработать что-то вроде этого:

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

Подробная информация:
https://alligator.io/angular/innerhtml-binding-angular/

Вам нужно попробовать эти вкладки,https://www.npmjs.com/package/@codehint-ng/tabs

Эти элементы управления позволяют гибко и раздельно размещать содержимое вкладок