Jak znaleźć, która akcja asynchroniczna wyzwala ngZone (która prowadzi do wykrywania zmian)?

Wszelkie zmiany w stosie aktualizacji aktualizacji zawsze prowadzą z powrotem do globalZoneAwareCallback. Jak dowiedzieć się, co spowodowało zmianę?

Jeśli chodzi o debugowanie, dobrze jest mieć wyraźny obraz.

globalZoneAwareCallbackto funkcja zadeklarowana w zonejs do obsługi wszystkich wywołań zwrotnych zdarzeń za pomocą capture=false. (btw, bo capture=truejest globalZoneAwareCaptureCallback)

Oznacza to, że każdy detektor zdarzeń najpierw przejdzie tę metodę. Ten detektor może zostać dodany na stronie przez Angular, przez ciebie lub dowolną bibliotekę strony trzeciej.

Istnieje wiele sposobów słuchania zdarzeń przeglądarki w Angular:

• subskrybuj zdarzenie przeglądarki <element (event)="callback()">

• @HostListener dekorator @HostListener('event') callback() {}

• Renderer2.listen metoda

• rxjs fromEvent

• przypisać właściwość elementu element.on<event> = callback

• metoda addEventListener element.addEventListener(event, callback)(ta metoda jest używana wewnętrznie na wiele innych sposobów powyżej)

Gdy znajdziesz się w środku globalZoneAwareCallback, masz dostęp do wszystkich zadań strefy, które powinny zostać uruchomione.

Wyobraźmy sobie, że słuchamy clickwydarzenia na document.body:

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

Otwórzmy narzędzia programistyczne Chrome, aby uzyskać wyraźny obraz:

Co właśnie odkryliśmy:

• każde zadanie strefy zawiera źródło, więc to powoduje zmianę

• Właściwość target pokazuje, który obiekt wyzwala zmianę

• Właściwość wywołania zwrotnego może doprowadzić nas do modułu obsługi zmiany

Rozważmy inny przykład i dodajmy zdarzenie click za pomocą Angular:

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

Po kliknięciu tego h2elementu powinniśmy przestrzegać następujących zasad:

Możesz być zaskoczony, że teraz właściwość wywołaniatest zwrotnego nie od razu doprowadziła nas do wywołania zwrotnego, ale raczej pokazaliśmy opakowanie @angular/platform-browser package. A także inne przypadki mogą się różnić, ale ZoneTask.source nieruchomość jest zwykle wszystko trzeba w tych sprawach, ponieważ pokazuje ci przyczynę zmiany .