Javascript 每次处理后都会触发角度变化检测？

假设我在模板内有两个连接到dom的单击处理程序：

<div (click)="handleClick()">
  <p (click)="handleClick()">
    Start editing to see some magic happen :)
  </p>
</div>

现在，如果有人单击p元素，则在每次单击处理程序（ngDoCheck执行两次）后都会触发更改检测。当我添加更多处理程序时，更改检测阶段的数量相应增加

下面是一个例子：

在这个简单的示例中，它是无害的，但我目前正在开发一个更大的应用程序，其中页面上有几十个组件，并且附加了多个处理程序（主要通过外部库连接到window.document）。在这种情况下，单击页面上的任意位置后，将多次检查组件

---

是否有一种方法可以在执行所有处理程序后执行一次更改检测？或者它是出于某种原因以这种方式实现的？

使用

ChangeDetectionStrategy.onPush

。您应该始终使用onPush

@Component({
  selector: 'selector'
  changeDetection: ChangeDetectionStrategy.onPush,
  //...
})
export default MyComponent {
  //...
}

---

对，它缩短了变更检测阶段，但仍会执行多次。不幸的是，我们的很多组件都是以一种不友好的方式编写的：/这些组件都是不好的。您应该真正考虑重构这些代码。为什么在代码< >代码> >代码> >代码> < P> <代码>下，调用<代码>处理程序< /代码>？这就是函数被调用两次的原因。请阅读事件冒泡，这只是一个例子。实际上，这些处理程序通过不同的组件连接到window.document。在开发模式下，Angular会运行一个额外的更改检测周期，以进行调试，但stackblitz会在生产环境中运行，因此在这种情况下，您只需面对事件冒泡—这是防止自动检查更改的唯一方法。您是否通过使用

onPush

手动控制触发更改，但根据我的经验，如果您选择了正确的数据结构和共享服务。这种自动变化检测并不是一个真正的问题。

@Component({
  selector: 'selector'
  changeDetection: ChangeDetectionStrategy.onPush,
  //...
})
export default MyComponent {
  //...
}