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

Question

在Angular Material中，我希望有延迟加载的标签，其中包含标题和图标。 在文档中告诉使用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>