Angular 10+开启OnPush模式后点击事件仍触发变更检测的问题

ChangeDetectionStrategy.OnPush并非完全阻止所有变更检测，它的触发条件包含以下场景：

• 组件的@Input属性引用发生变化
• 组件自身绑定的DOM事件被触发（如点击、输入、鼠标事件等）
• 手动调用ChangeDetectorRef.markForCheck()或detectChanges()
• Angular Zone内的异步操作完成（如RxJS订阅、Promise回调）

你的代码中，按钮绑定了组件自身的(click)事件，点击时属于上述第二种场景，Angular会自动启动当前组件的变更检测流程，因此模板中绑定的value()方法会被执行，控制台输出detect fired，这是符合Angular设计逻辑的正常行为，不需要手动调用markForCheck()。

可以通过拆分组件来验证这个逻辑：

1. 创建子组件，将点击事件移到子组件中：

@Component({
  selector: 'app-child',
  template: `<button type="button" (click)="emitClick()">子组件按钮</button>`
})
export class ChildComponent {
  @Output() childClick = new EventEmitter<void>();

  emitClick() {
    this.childClick.emit();
  }
}

2. 修改父组件模板，使用子组件并绑定输出事件：

<app-child (childClick)="onClick()"></app-child>
{{value()}}

此时点击子组件按钮，父组件的onClick()会执行，但value()不会输出detect fired——因为事件来自子组件的@Output传递，不属于父组件自身的DOM事件触发，未满足OnPush的自动检测条件。如果此时需要触发父组件变更检测，才需要在onClick()中调用ChangeDetectorRef.markForCheck()。

OnPush模式下，组件自身的DOM事件触发会自动触发变更检测，这是Angular为了保证组件交互响应的内置机制。只有当变更触发源来自组件外部且未命中OnPush的默认检测条件时，才需要手动触发变更检测。

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