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>

具有复杂标签的延迟加载选项卡

1 个答案: