Come trovare quale azione asincrona innesca ngZone (che porta a Change Detection)?

Qualsiasi modifica nella traccia dello stack degli aggiornamenti riconduce sempre a globalZoneAwareCallback. Come scopri cosa ha innescato il cambiamento?

In termini di debug è bene avere un'immagine chiara.

globalZoneAwareCallbackè una funzione dichiarata in zonejs per la gestione di tutti i callback di eventi con capture=false. (a proposito, perché capture=truec'è globalZoneAwareCaptureCallback)

Significa che qualsiasi listener di eventi dovrà prima seguire questo metodo. Quel listener può essere aggiunto sulla pagina da Angular, da te o da qualsiasi libreria di terze parti.

Esistono molti modi per ascoltare gli eventi del browser in Angular:

• iscriviti all'evento del browser <element (event)="callback()">

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

• Renderer2.listen metodo

• rxjs fromEvent

• assegnare la proprietà dell'elemento element.on<event> = callback

• Metodo addEventListener element.addEventListener(event, callback)(questo metodo viene utilizzato internamente in molti altri modi sopra)

Una volta dentro, globalZoneAwareCallbackhai accesso a tutte le attività della zona che dovrebbero essere attivate.

Immaginiamo di ascoltare l' clickevento su document.body:

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

Apriamo gli strumenti di sviluppo di Chrome per avere un'immagine chiara:

Quello che abbiamo appena scoperto:

• ogni attività della zona contiene origine, quindi questo è ciò che attiva la modifica

• la proprietà target mostra quale oggetto attiva la modifica

• la proprietà callback può portarci al gestore della modifica

Consideriamo un altro esempio e aggiungiamo un evento click usando Angular way:

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

Dopo aver fatto clic su h2quell'elemento dovremmo osservare quanto segue:

Potresti essere sorpreso dal fatto che ora la proprietà callback non ci abbia portato subito alla testcallback, ma piuttosto abbiamo mostrato un wrapper da @angular/platform-browser package. E altri casi anche possono essere diverse, ma ZoneTask.source proprietà di solito è tutto ciò che serve in questi casi, perché mostra si la causa principale del cambiamento .