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，并且当我的 app-component 呈现选项卡组时。所有选项卡的内容都将异步加载，为此，将调用所有组件的所有API。这会降低效率。

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

有人可以通过指导合适的活动或技术来帮助我吗？

Answer 1

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
}

Answer 2

如果要在更改选项卡时刷新选项卡内容，另一种有用的方法是将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>

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

2 个答案: