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

【问题标题】：Controlled rendering of contents of Tabs in angular material tabs角度材质选项卡中选项卡内容的受控渲染
【发布时间】：2018-08-09 05:42:21
【问题描述】：

我正在使用 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 被不必要地调用。

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

【问题讨论】：

默认情况下不要调用ngonInit上的所有API，加载第一个选项卡组，只在ngoninit上调用该API，而在每个选项卡上单击调用其他API

标签： javascript angular angular-material angular6

【解决方案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>

【讨论】：

确实我做了同样的事情，并为此升级到 Angular 6。
非常干净的方法来强制刷新子选项卡。谢谢。在角度 9 中工作。

【解决方案2】：

HTML

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

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

【讨论】：