使用ChangeDetectionStrategy.OnPush策略时子组件ngModel无法正常更新问题

问题原因 #

你遇到的现象是ChangeDetectionStrategy.OnPush策略的正常表现：使用该策略的组件，Angular仅在以下几种场景下才会执行变更检测更新视图：

• 组件的@Input()输入属性的引用发生变更
• 组件内部触发了DOM事件（比如点击、输入、选中等操作，这就是你选中组件后值突然更新的原因）
• 手动调用变更检测相关方法通知Angular更新
• 用async管道绑定的Observable流抛出新值

你用setTimeout模拟的异步API回调不属于上述前两个自动触发场景，所以值更新后Angular没有检测到，视图不会同步更新。而ChangeDetectionStrategy.Default策略会在所有异步事件触发后全量遍历组件树执行变更检测，所以不会出现更新延迟的问题。

解决方案 #

最简便的适配方案是注入ChangeDetectorRef，在异步更新值后手动标记组件需要进行变更检测：

步骤1：在组件中注入ChangeDetectorRef #

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

@Component({
  selector: 'app-single-select',
  templateUrl: './single-select.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SingleSelectComponent {
  constructor(private cdr: ChangeDetectorRef) {}
  // ...其他业务逻辑
}

步骤2：异步更新值后调用markForCheck #

如果你是在组件内部的异步回调中更新绑定值：

// 模拟API请求回调
setTimeout(() => {
  this.selectedValue = 接口返回的新值;
  this.cdr.markForCheck(); // 新增这行，标记该组件及祖先链为待检测状态，下次变更检测周期就会更新视图
}, 1000);

如果你的自定义组件是实现了ControlValueAccessor的表单组件，还需要在writeValue方法中补充标记逻辑，避免外部异步修改表单值时也出现更新失效问题：

writeValue(value: any): void {
  this.innerValue = value;
  this.cdr.markForCheck(); // 新增这行
}

可选替代方案 #

如果你不想手动处理变更检测标记，也可以将异步返回的结果封装为Observable，在模板中使用async管道绑定，async管道内部会自动执行markForCheck逻辑，天然适配OnPush策略。

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