Ленивые загрузки вкладок со сложной меткой

Question

В Angular Material я хочу иметь лениво загруженные вкладки с метками, которые содержат заголовок и значок.В doc сказали использовать matTabContent и положить тело внутрь ng-template для отложенной загрузки.Также для сложных этикеток используйте директиву mat-tab-label и поместите этикетку внутри ng-template.Когда я использую оба вместе, это не работает правильно.

<mat-tab-group mat-stretch-tabs>
<mat-tab>
  <ng-template matTabContent mat-tab-label>
  <mat-icon>people</mat-icon>
 <span class="title">info</span>
    <app-group-info></app-group-info>
  </ng-template>
</mat-tab>
<mat-tab>
  <ng-template matTabContent mat-tab-label>
  <mat-icon>shopping_cart</mat-icon>
 <span class="title">purchases</span>
    <app-group-purchase-list></app-group-purchase-list>
  </ng-template>
</mat-tab>
</mat-tab-group>

Есть предложения?Заранее спасибо.

Answer 1

Я попробовал несколько идей и наконец нашел решение:

<mat-tab-group mat-stretch-tabs>
 <mat-tab>
  <ng-template mat-tab-label>
   <mat-icon>people</mat-icon>
   <span class="title">info</span>
  <ng-template>
  <ng-template matTabContent>
   <app-group-info></app-group-info>
  </ng-template>
 </mat-tab>
 ...
</mat-tab-group>