Angular开启OnPush策略时如何设置深层嵌套属性且不重渲染整棵组件树

问题原因 #

Angular 中 ChangeDetectionStrategy.OnPush 策略仅在以下4种场景下触发组件变更检测：

1. 组件的输入属性引用发生变化
2. 组件内部触发了事件（比如点击、输入等）
3. 手动调用 ChangeDetectorRef 的 markForCheck()/detectChanges() 方法
4. 组件模板中使用的 async 管道收到新值
   你直接修改对象深层属性属于修改引用内部值，输入属性的引用没有变化，因此不会触发变更检测；全量替换数组/对象引用会导致所有节点的输入引用变化，触发全量重渲染，性能开销大。

可行方案（按性能从优到次排序） #

方案1：拆分为独立菜单项子组件 + 局部触发变更检测（最推荐）

把每个菜单项封装为独立的OnPush子组件，每个组件单独管理自己的变更检测，仅更新需要修改的节点，其余节点完全不会重渲染。

实现步骤：

1. 定义菜单项子组件：

// menu-item.component.ts
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-menu-item',
  template: `
    <li [class.active]="item.active">
      {{ item.text }}
      <ul *ngIf="item.children?.length">
        <app-menu-item 
          *ngFor="let subItem of item.children; trackBy: trackById"
          [item]="subItem"
        ></app-menu-item>
      </ul>
    </li>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MenuItemComponent {
  @Input() item: { text: string; children?: any[]; active?: boolean };
  constructor(private cdr: ChangeDetectorRef) {}

  trackById(index: number, item: any) {
    // 建议用业务唯一ID，示例暂时用text
    return item.text;
  }

  // 暴露方法供父组件触发当前组件的变更检测
  updateActiveState(isActive: boolean) {
    this.item.active = isActive;
    this.cdr.markForCheck();
  }
}

2. 父组件中查询子组件实例，按需触发更新：

// 父组件ts
import { ViewChildren, QueryList } from '@angular/core';
import { MenuItemComponent } from './menu-item.component';

export class AppComponent {
  @ViewChildren(MenuItemComponent) menuItems: QueryList<MenuItemComponent>;
  
  menu = [/* 你的菜单数据 */];

  setTargetActive() {
    const targetText = 'level-1-2-2';
    // 找到对应菜单项的子组件实例，直接调用更新方法
    const targetComp = this.menuItems.find(comp => comp.item.text === targetText);
    targetComp?.updateActiveState(true);
  }
}

方案2：响应式状态 + async 管道

将菜单项的active属性改为响应式BehaviorSubject，利用async管道自动触发变更检测的特性实现更新，无需手动操作ChangeDetectorRef。

实现示例：

// 定义菜单项类型
interface MenuItem {
  text: string;
  children?: MenuItem[];
  active: BehaviorSubject<boolean>;
}

// 初始化菜单时给每个节点加active属性
menu: MenuItem[] = [
  {
    text: "level-1",
    children: [
      { text: "level-1-1", active: new BehaviorSubject(false) },
      {
        text: "level-1-2",
        children: [
          { text: "level-1-2-1", active: new BehaviorSubject(false) },
          { text: "level-1-2-2", active: new BehaviorSubject(false) },
          { text: "level-1-2-3", active: new BehaviorSubject(false) }
        ],
        active: new BehaviorSubject(false)
      },
      { text: "level-1-3", active: new BehaviorSubject(false) }
    ],
    active: new BehaviorSubject(false)
  },
  { text: "level-2", active: new BehaviorSubject(false) },
  { text: "level-3", active: new BehaviorSubject(false) }
];

模板中用async管道取值：

<li [class.active]="item.active | async">
  {{ item.text }}
  <!-- 子菜单逻辑同上 -->
</li>

更新时直接给activeSubject发送新值即可：

setTargetActive() {
  this.menu[0].children[1].children[1].active.next(true);
}

方案3：局部Immutable更新 + trackBy

如果不想拆分组件，可以只重建从修改节点到根节点的引用链路，配合*ngFor的trackBy参数，仅重渲染修改的节点，开销远低于全量替换。

实现示例：

setTargetActive() {
  // 1. 复制目标节点并修改active属性
  const targetNode = {...this.menu[0].children[1].children[1], active: true};
  // 2. 复制目标节点的父级children数组，仅替换目标节点
  const level2Children = this.menu[0].children[1].children.map(item => 
    item.text === targetNode.text ? targetNode : item
  );
  // 3. 复制父级节点，替换children数组
  const level1Node = {...this.menu[0].children[1], children: level2Children};
  // 4. 复制更上层children数组，替换父级节点
  const level1Children = this.menu[0].children.map(item => 
    item.text === level1Node.text ? level1Node : item
  );
  // 5. 复制根节点，替换children数组
  const rootNode = {...this.menu[0], children: level1Children};
  // 6. 复制根菜单数组，替换根节点
  this.menu = this.menu.map(item => 
    item.text === rootNode.text ? rootNode : item
  );
}

所有*ngFor都加上trackBy，避免不必要的组件重建：

<app-menu-item 
  *ngFor="let item of menu; trackBy: trackById"
  [item]="item"
></app-menu-item>

trackById(index: number, item: any) {
  return item.text;
}

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