如何找到哪个异步操作触发ngZone（导致更改检测）？

更新的堆栈跟踪中的任何更改始终会导致返回globalZoneAwareCallback。您如何找出引发变化的原因？

在调试方面，最好有一个清晰的画面。

globalZoneAwareCallback是在zonejs中声明的函数，用于使用来处理所有事件回调capture=false。（顺便说一句，因为capture=true有globalZoneAwareCaptureCallback）

这意味着任何事件侦听器都将首先使用此方法。该侦听器可以由Angular，您或任何第3方库添加到页面上。

我们可以通过多种方式来监听Angular中的浏览器事件：

• 订阅浏览器事件 <element (event)="callback()">

• @HostListener 装饰工 @HostListener('event') callback() {}

• Renderer2.listen 方法

• rxjs fromEvent

• 分配元素属性 element.on<event> = callback

• addEventListener方法element.addEventListener(event, callback)（此方法在上面的许多其他内部方法中使用）

一旦进入，您就globalZoneAwareCallback可以访问所有应触发的区域任务。

假设我们click在上监听事件document.body：

document.body.addEventListener('click', () => {
   // some code
});

让我们打开Chrome开发者工具以清楚了解情况：

我们刚刚发现的是：

• 每个区域任务都包含源，因此这就是触发更改的原因

• 目标属性显示哪个对象触发更改

• 回调属性可以将我们引向更改的处理程序

让我们考虑另一个示例，并使用Angular方式添加click事件：

<h2 class="title" (click)="test()">Hello {{name}}</h2>

单击该h2元素后，我们应注意以下几点：

您可能会感到惊讶，现在回调属性没有立即将我们带入test回调，而是显示了来自的一些包装@angular/platform-browser package。和其他案件也可能会有所不同，但ZoneTask.source财产通常是你在这些情况下需要的，因为它显示了你的变化的根本原因。