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


11

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

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


Хотите объяснить?
user2167582

Ваш вопрос совершенно неоднозначен!
nimeresam

@nimeresam Как так? его общее я согласен, но неоднозначно?
user2167582

2
Я обновил вопрос, надеюсь, он вам поможет
Степан Суворов

Ответы:


31

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 свойство, как правило , все , что вам нужно в тех случаях , так как он показывает вам причину изменения .


Спасибо, сэр, это был отличный ответ, я хотел бы удвоить награду.
user2167582
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.