使用ChangeDetectionStrategy.OnPush后菜单组件切换Tab数据消失如何解决？

问题原因 #

OnPush模式下，Angular仅在以下四种场景触发变更检测：

• 组件的@Input属性引用发生变化
• 组件自身触发了用户事件（如点击、输入）
• 显式调用变更检测方法
• 使用async管道订阅Observable

你遇到的问题，核心是切换回Food标签页时，没有满足上述任一触发条件：要么筛选后返回的菜单数组是原引用（Angular判定数据无变化），要么标签切换事件没有触发组件的变更检测流程。

具体解决方案 #

1. 确保筛选方法返回新数组

如果你的getByCategory方法基于现有数组做筛选，必须保证每次返回新的数组引用（哪怕内容和之前一致）。示例：

getByCategory(category: string): MenuItem[] {
  // filter本身会创建新数组，确保不要直接返回原数组的子集引用
  return this.menuItems.filter(item => item.category === category);
  // 若涉及排序/修改操作，先用spread语法复制原数组再处理
  // return [...this.menuItems].sort((a, b) => a.name.localeCompare(b.name));
}

避免直接修改原数组后返回，必须通过创建新引用让Angular识别到数据变化。

2. 用async管道处理异步数据

如果菜单数据是从MenuService通过Observable获取的，直接在模板中使用async管道，它会自动处理订阅和变更检测：

// 组件类
menuItems$ = this.menuService.getMenuData(); // 假设该方法返回Observable
activeCategory = 'Food';

// 模板
<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="Food">
    <div *ngFor="let item of menuItems$ | async | filterByCategory: activeCategory">
      {{ item.name }}
    </div>
  </mat-tab>
  <mat-tab label="Bar">
    <div *ngFor="let item of menuItems$ | async | filterByCategory: activeCategory">
      {{ item.name }}
    </div>
  </mat-tab>
</mat-tab-group>

这里的filterByCategory是自定义纯管道（默认即为纯管道），当activeCategory变化时会自动重新计算结果。

3. 显式触发变更检测

在标签切换事件中，手动通知Angular检测组件变更。先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

onTabChange(event: MatTabChangeEvent) {
  this.activeCategory = event.tab.textLabel;
  // 标记组件需要进行变更检测（推荐）
  this.cdr.markForCheck();
  // 或直接触发当前组件及子组件的检测
  // this.cdr.detectChanges();
}

每次切换标签时，强制Angular检查组件状态并更新视图。

4. 用BehaviorSubject管理分类状态

通过响应式数据流管理选中分类，状态变化会自动触发视图更新，完全适配OnPush模式：

// 组件类
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

private activeCategory$ = new BehaviorSubject<string>('Food');
filteredMenuItems$ = combineLatest([
  this.menuService.getMenuData(),
  this.activeCategory$
]).pipe(
  map(([menuItems, category]) => menuItems.filter(item => item.category === category))
);

onTabChange(event: MatTabChangeEvent) {
  this.activeCategory$.next(event.tab.textLabel);
}

// 模板
<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="Food">
    <div *ngFor="let item of filteredMenuItems$ | async">
      {{ item.name }}
    </div>
  </mat-tab>
  <mat-tab label="Bar">
    <div *ngFor="let item of filteredMenuItems$ | async">
      {{ item.name }}
    </div>
  </mat-tab>
</mat-tab-group>

这种方式利用RxJS的响应式特性，状态变更会自动驱动视图更新，是OnPush模式下的最佳实践之一。

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