Angular切换mat-tab时重复触发OnInit问题求助

mat-tab-group默认会预加载并缓存所有标签内容，这就导致切换标签时，当前标签组件不会触发OnDestroy，反而新标签和当前标签都会触发OnInit。

直接给动态生成的<mat-tab>添加[destroyOnHide]="true"属性即可解决：

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label" [destroyOnHide]="true">
    <ng-container *ngIf="tab.id === 'tab1'">
      <app-tab1></app-tab1>
    </ng-container>
    <ng-container *ngIf="tab.id === 'tab2'">
      <app-tab2></app-tab2>
    </ng-container>
  </mat-tab>
</mat-tab-group>

原理说明 #

• destroyOnHide属性会让Angular Material在标签隐藏时，彻底销毁其内部的组件实例，触发OnDestroy钩子
• 当切换回该标签时，会重新创建组件实例，触发OnInit钩子
• 之前使用ngIf或[hidden]无效，是因为这些指令仅控制组件的显示/隐藏，mat-tab容器会始终保留组件实例，不会触发销毁逻辑

内容的提问来源于stack exchange，提问作者Ulana