角度材质选项卡中选项卡内容的受控渲染

Question

我正在使用 Angular Material 选项卡组。

<mat-tab-group>
  <mat-tab label="First"> <app-home> </app-home> </mat-tab>
  <mat-tab label="Second"> <app-info> </app-info> </mat-tab>
  <mat-tab label="Third"><app-details> </app-home> </mat-tab>
</mat-tab-group>

在ngOnInit(){}每个组件中，我正在调用一个或多个 API，以及当我的应用程序组件呈现选项卡组时。所有选项卡的内容都被异步加载，为此，所有组件的所有 API 都被调用。这是在降低效率。

我想控制选项卡内容的呈现，以便仅呈现选定的选项卡。这样我就可以阻止所有其他 API 被不必要地调用。

任何人都可以通过指导适当的事件或技术来帮助我实现这一目标吗？

Answer 1

如果您想在选项卡更改时刷新选项卡内容，另一种有用的方法是将 ng-template 与 matTabContent 一起使用。例子，

<mat-tab-group>
  <mat-tab label="A">
    <ng-template matTabContent> Content of tab A </ng-template>
  </mat-tab>
  <mat-tab label="B">
    <ng-template matTabContent> Content of tab B </ng-template>
  </mat-tab>
</mat-tab-group>