Wie finde ich heraus, welche asynchrone Aktion ngZone auslöst (was zur Änderungserkennung führt)?

Änderungen in der Stapelverfolgung von Aktualisierungen führen immer zurück zu globalZoneAwareCallback. Wie finden Sie heraus, was die Änderung ausgelöst hat?

In Bezug auf das Debuggen ist es gut, ein klares Bild zu haben.

globalZoneAwareCallbackist eine in zonejs deklarierte Funktion zur Behandlung aller Ereignisrückrufe mit capture=false. (Übrigens, denn capture=truees gibt globalZoneAwareCaptureCallback)

Dies bedeutet, dass jeder Ereignis-Listener diese Methode zuerst durchläuft. Dieser Listener kann von Angular, von Ihnen oder von einer Drittanbieter-Bibliothek auf der Seite hinzugefügt werden.

Es gibt viele Möglichkeiten, wie wir Browserereignisse in Angular abhören können:

• Browser-Ereignis abonnieren <element (event)="callback()">

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

• Renderer2.listen Methode

• rxjs fromEvent

• Elementeigenschaft zuweisen element.on<event> = callback

• addEventListener-Methode element.addEventListener(event, callback)(diese Methode wird oben auf viele andere Arten intern verwendet)

Sobald Sie sich in Ihrem Bereich befinden globalZoneAwareCallback, haben Sie Zugriff auf alle Zonenaufgaben , die ausgelöst werden sollen.

Stellen wir uns vor, wir hören uns das clickEreignis an document.body:

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

Öffnen wir die Chrome-Entwicklungstools, um ein klares Bild zu erhalten:

Was wir gerade entdeckt haben:

• Jede Zonenaufgabe enthält eine Quelle, daher löst dies die Änderung aus

• Die Zieleigenschaft zeigt an, welches Objekt die Änderung auslöst

• Die Callback- Eigenschaft kann uns zum Handler der Änderung führen

Betrachten wir ein weiteres Beispiel und fügen Sie ein Klickereignis auf Angular-Weise hinzu:

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

Sobald wir auf dieses h2Element klicken, sollten wir Folgendes beachten:

Sie werden überrascht sein, dass uns die Callback- Eigenschaft jetzt nicht sofort zum Callback gebracht hat, testsondern dass wir einen Wrapper von gezeigt haben @angular/platform-browser package. Andere Fälle können ebenfalls abweichen, aber die Eigenschaft ZoneTask.source ist normalerweise alles, was Sie in diesen Fällen benötigen, da sie Ihnen die Hauptursache der Änderung anzeigt .