Як знайти, яка асинхронна дія запускає ngZone (що призводить до виявлення змін)?

Будь-які зміни в сліді стеку оновлень завжди призводять до globalZoneAwareCallback. Як ви дізнаєтесь, що спричинило зміни?

У плані налагодження добре мати чітку картину.

globalZoneAwareCallback- це функція, оголошена в zonejs для обробки всіх зворотних викликів подій capture=false. (btw, бо 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 показує, який об'єкт запускає зміни

• властивість зворотного виклику може привести нас до обробника змін

Розглянемо ще один приклад та додамо подію клацання за допомогою кутового способу:

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

Після натискання на цей h2елемент ми повинні спостерігати наступне:

Ви можете бути здивовані , що тепер на зворотний дзвінок властивість не призведе нас до функції testзворотного виклику одразу, а ми показали деяку обгортку від @angular/platform-browser package. І інші випадки також можуть відрізнятися, але властивість ZoneTask.source зазвичай є всім, що вам потрібно в цих випадках, оскільки воно показує вам першопричину змін .