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

Question

更新堆栈跟踪中的任何更改总是会返回到globalZoneAwareCallback. 你如何找出是什么触发了改变？

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

Answer 1

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

这意味着任何事件侦听器都将首先通过此方法。该监听器可以由 Angular、您或任何 3rd 方库添加到页面上。

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

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

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

• Renderer2.listen方法

• rxjsfromEvent

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

• addEventListener 方法element.addEventListener(event, callback)（这个方法在上面很多其他方式内部使用）

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

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

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

让我们打开 Chrome 开发工具来获得清晰的画面：

我们刚刚发现：

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

• target属性显示哪个对象触发了更改

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

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

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

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

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