Angular中点击mat-tab标签时如何每次触发子组件重新渲染

Angular Material的mat-tab默认会缓存非激活tab的内容避免重复渲染，你只需要给mat-tab添加[preserveContent]="false"属性，切换tab时就会自动销毁非激活tab的内容，切回时重新渲染，子组件的ngOnInit每次都会触发：

<mat-tab label="{{tab}}" *ngFor="let tab of tabs" [preserveContent]="false">
  <!-- 原有内容保持不变 -->
</mat-tab>

注意：这个配置会对所有循环生成的tab生效，两个子组件切换时都会重新渲染，如果只需要Deals tab生效可以用下面两个方案。

你可以监听mat-tab-group的切换事件，记录当前激活的tab，然后只在当前激活tab匹配时才渲染对应子组件，切换时不符合条件的组件会被销毁，切回时重新创建：

步骤1：给mat-tab-group绑定切换事件 #

Component A的模板：

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="{{tab}}" *ngFor="let tab of tabs">
    <div class="mat-tab-shadow-container">
      <div class="mat-tab-shadow"></div>
    </div>
    <div class="tab-content">
      <!-- 只有激活tab是Overview时才渲染该组件 -->
      <app-transaction-overview *ngIf="activeTab === 'Overview' && tab === 'Overview'" [transaction]="transaction"
          (teamAndUsers)="teamAndUsersEvent($event)" #transactionOverView
          (saveTransactionEvent)="saveTransactionEvent($event)"></app-transaction-overview>
      <!-- 只有激活tab是Deals时才渲染该组件 -->
      <app-deals-transaction *ngIf="activeTab === 'Deals' && tab === 'Deals'" [transaction]="transaction"  [resetFormSubject]="resetFormSubject"></app-deals-transaction>
    </div>
  </mat-tab>
</mat-tab-group>

步骤2：Component A的ts中添加对应逻辑 #

// 新增变量存储当前激活的tab，默认值和第一个展示的tab保持一致即可
activeTab: string = 'Overview';

onTabChange(event: MatTabChangeEvent) {
  this.activeTab = event.tab.textLabel;
}

你现有代码里已经给子组件传了resetFormSubject，可以直接用这个Subject发送刷新通知，不需要销毁重建组件，性能更好：

步骤1：Component A监听tab切换，切换到Deals时发通知 #

// 你已经定义了resetFormSubject，直接使用即可
resetFormSubject: Subject<boolean> = new Subject<boolean>();

onTabChange(event: MatTabChangeEvent) {
  if(event.tab.textLabel === 'Deals') {
    // 切换到Deals tab时发送刷新信号
    this.resetFormSubject.next(true);
  }
}

步骤2：子组件订阅信号执行刷新逻辑 #

在Deals子组件中订阅这个Subject，收到信号后执行需要刷新的逻辑即可：

ngOnInit(): void {
  this.resetFormSubject.subscribe(() => {
    // 这里写你要刷新的逻辑，比如重新请求列表、重置表单等
    this.loadDealsList();
    this.resetForm();
  })
}

// 记得组件销毁时取消订阅避免内存泄漏
ngOnDestroy() {
  this.resetFormSubject.unsubscribe();
}

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