Angular OnPush模式下@Input异步更新为何需markForCheck触发变更检测？

我来帮你理清楚这个问题的核心——你已经正确启用了OnPush变更检测，但异步更新@Input时没触发ngOnChanges，加markForCheck()就恢复正常，这背后其实是Angular OnPush的工作机制和异步操作的Zone上下文问题。

先回顾OnPush的触发规则 #

OnPush模式下，Angular只会在以下三种情况触发组件的变更检测：

• 组件的**@Input属性引用发生变化**（注意是引用，不是数组/对象内部值的修改）
• 组件自身触发了DOM事件（比如点击、输入等）
• 手动调用变更检测相关方法（比如markForCheck()、detectChanges()）

你的场景为什么没自动触发？ #

你在ngOnInit里通过GraphQL服务异步获取数据，然后给informationMessages赋值新数组——理论上这已经改变了@Input的引用，应该触发变更检测，但实际没生效，问题出在异步回调的执行上下文：
如果你的GraphQL服务返回的Observable没有在Angular的NgZone内运行（有些第三方库会默认跳出Angular Zone以提升性能），那么Angular就无法自动察觉到数据的更新，哪怕你修改了@Input的引用，变更检测也不会被触发，子组件的ngOnChanges自然不会执行。

解决办法（两种可选） #

1. 手动调用markForCheck()（你已经验证有效的方案）

在给informationMessages赋值后调用markForCheck()，这会告诉Angular：当前组件及其所有父组件需要在下一次变更检测周期中被检查，这样就能触发子组件的ngOnChanges了。代码示例：

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

// ...组件构造函数
constructor(private changeDetectorRef: ChangeDetectorRef) {}

ngOnInit() {
  this.graphqlService.loadInformationMessages().subscribe(data => {
    const informationMessages: InformationMessageType[] = data;
    // ...你的解析逻辑
    this.informationMessages = informationMessages;
    this.changeDetectorRef.markForCheck();
  });
}

2. 让异步回调在NgZone内运行

如果你不想手动调用变更检测方法，可以注入NgZone，把赋值逻辑包裹在zone.run()中，强制让代码在Angular的Zone上下文内执行，这样Angular就能自动捕获到数据变更：

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

// ...组件构造函数
constructor(private zone: NgZone) {}

ngOnInit() {
  this.graphqlService.loadInformationMessages().subscribe(data => {
    this.zone.run(() => {
      const informationMessages: InformationMessageType[] = data;
      // ...你的解析逻辑
      this.informationMessages = informationMessages;
    });
  });
}

额外提醒 #

另外要注意，如果你是修改数组内部的元素（比如用push()、splice()），哪怕在Zone内，OnPush也不会触发变更检测——因为引用没变化。这种情况你要么替换整个数组（像你现在做的那样），要么手动触发变更检测。

内容的提问来源于stack exchange，提问作者Martijn van den Bergh