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方法

rxjs fromEvent

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

addEventListener 方法 element.addEventListener(event, callback) (此方法在内部以上述许多其他方式使用)

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

让我们想象一下我们在听 click事件在 document.body :

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

让我们打开 Chrome 开发工具来有一个清晰的画面:



我们刚刚发现的:

每个区域任务包含 来源所以这就是触发变化的原因

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

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

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

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

一旦我们点击那个 h2元素我们应该遵守以下几点:



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