角度材质标签中标签内容的受控呈现

Question

我正在使用“角度材质”选项卡组。

<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>

Answer 2

的HTML

<mat-tab-group (selectedTabChange)="onTabClick($event)"

TS

public onTabClick(event: any): void { // clicked tab can be get using event.index
    // load data for the clicked tab
}