Как найти, какое асинхронное действие запускает ngZone (что приводит к обнаружению изменений)?

Любые изменения в трассировке стека обновлений всегда приводят к globalZoneAwareCallback. Как вы узнали, что вызвало изменение?

С точки зрения отладки хорошо иметь четкую картину.

globalZoneAwareCallbackэто функция, объявленная в zonejs для обработки всех обратных вызовов событий с capture=false. (кстати, capture=trueесть globalZoneAwareCaptureCallback)

Это означает, что любой слушатель события сначала пройдет этот метод. Этот слушатель может быть добавлен на страницу Angular, вами или любой сторонней библиотекой.

Существует множество способов прослушивания событий браузера в 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, чтобы получить четкую картину:

Что мы только что обнаружили:

• каждая задача зоны содержит источник, так что это то, что вызывает изменение

• Свойство target показывает, какой объект вызывает изменение

• свойство обратного вызова может привести нас к обработчику изменений

Давайте рассмотрим другой пример и добавим событие click, используя Angular:

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

Как только мы нажмем на этот h2элемент, мы должны соблюдать следующее:

Вы можете быть удивлены тем, что теперь свойство обратного вызова не сразу привело нас к testобратному вызову, но мы показали некоторую оболочку из @angular/platform-browser package. А в других случаях также могут отличаться , но ZoneTask.source свойство, как правило , все , что вам нужно в тех случаях , так как он показывает вам причину изменения .