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

Question

更新堆栈跟踪中的任何更改总是导致返回 globalZoneAwareCallback。您如何找出触发更改的原因？

对于调试来说，有清晰的画面就好了。

Answer 1

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

意思是任何事件监听器都会先经过这个方法。该侦听器可以由 Angular、您或任何第 3 方库添加到页面上。

在 Angular:

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

订阅浏览器事件<element (event)="callback()">
@HostListener装饰器@HostListener('event') callback() {}
Renderer2.listen方法
rxjsfromEvent
分配元素属性element.on<event> = callback
addEventListener 方法element.addEventListener(event, callback)（此方法在上面的许多其他方式内部使用）

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

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

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

让我们打开Chrome开发工具看个清楚：

我们刚刚发现：

每个区域任务包含源所以这就是触发更改的原因
target 属性显示触发更改的对象
callback 属性可以引导我们到更改的处理程序

再考虑一个例子，使用Angular方式添加点击事件：

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

单击 h2 元素后，我们应该观察以下内容：

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

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

How to find which async action triggers ngZone (that lead to Change Detection)?

debugging

angular

angular-ngzone