Angular onPush策略下基本类型属性变更检测失效的解决方法

在OnPush变更检测策略下，Angular只会在以下几种场景触发变更检测：

• 组件输入属性的引用发生变化
• 组件或子组件触发了DOM事件（比如点击、输入）
• 手动调用变更检测方法
• 使用async管道处理Observable

你直接在subscribe回调里修改selected属性，属于组件内部状态更新，不在OnPush的自动检测触发范围内，所以视图不会同步更新。这里给你几个实用的解决方法：

方法1：使用Async管道（推荐） #

把Observable直接绑定到模板，用async管道处理，Angular会自动管理订阅和变更检测，完全符合OnPush的最佳实践。

组件类代码：

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BoxComponent {
  @Input() index: number;
  // 把选中状态转换成Observable
  isSelected$ = this.boxService.selectedBox$.pipe(
    map(box => box?.id === this.index)
  );

  constructor(private boxService: BoxService) {}
}

模板代码：

<!-- 直接用async管道订阅，自动更新视图 -->
<div class="box" [class.selected]="isSelected$ | async">
  <!-- 组件内容 -->
</div>

方法2：手动触发变更检测 #

如果必须手动订阅Observable，可以注入ChangeDetectorRef，在回调里手动标记视图需要更新。

组件类代码：

import { Component, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BoxComponent {
  @Input() index: number;
  selected = false;

  constructor(
    private boxService: BoxService,
    private cdr: ChangeDetectorRef // 注入变更检测服务
  ) {}

  ngOnInit() {
    this.boxService.selectedBox$.subscribe((box: Box | null) => {
      this.selected = box?.id === this.index;
      // 标记组件及其父组件需要进行变更检测
      this.cdr.markForCheck();
      // 如果你需要立即更新视图，可以用detectChanges()
      // this.cdr.detectChanges();
    });
  }
}

方法3：通过输入属性传递状态（场景适配） #

如果你的组件选中状态可以由父组件控制，也可以让父组件订阅selectedBox$，然后把selected作为输入属性传递给子组件。因为OnPush会检测输入属性的引用变化（基本类型每次赋值都是新引用，也会触发检测）：

父组件模板：

<app-box 
  *ngFor="let box of boxes" 
  [index]="box.id" 
  [selected]="selectedBoxId === box.id"
></app-box>

父组件类：

selectedBoxId: number | null = null;

ngOnInit() {
  this.boxService.selectedBox$.subscribe(box => {
    this.selectedBoxId = box?.id || null;
  });
}

子组件类：

@Input() selected = false;

这种方法适合状态由父组件统一管理的场景，也能触发OnPush的变更检测。

优先推荐方法1，它能减少手动订阅的代码，避免内存泄漏风险，同时让代码更符合响应式编程的思路。如果场景限制必须手动订阅，方法2是最直接的解决方案。

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