¿Cómo encontrar qué acción asíncrona desencadena ngZone (que conduce a la detección de cambios)?

Cualquier cambio en el seguimiento de la pila de actualizaciones siempre conduce a globalZoneAwareCallback. ¿Cómo saber qué provocó el cambio?

En términos de depuración, es bueno tener una imagen clara.

globalZoneAwareCallbackes una función declarada en zonejs para manejar todas las devoluciones de llamada de eventos con capture=false. (por cierto, porque capture=truehay globalZoneAwareCaptureCallback)

Significa que cualquier escucha de eventos primero pasará por este método. Angular, usted o cualquier biblioteca de terceros pueden agregar ese oyente a la página.

Hay muchas maneras de cómo podemos escuchar los eventos del navegador en Angular:

• suscribirse al evento del navegador <element (event)="callback()">

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

• Renderer2.listen método

• rxjs fromEvent

• asignar propiedad del elemento element.on<event> = callback

• Método addEventListener element.addEventListener(event, callback)(este método se usa internamente en muchas otras formas anteriores)

Una vez dentro globalZoneAwareCallback, tiene acceso a todas las tareas de Zona que deberían activarse.

Imaginemos que escuchamos el clickevento en document.body:

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

Abramos las herramientas de desarrollo de Chrome para tener una imagen clara:

Lo que acabamos de descubrir:

• cada tarea de Zone contiene fuente, por lo que esto es lo que desencadena el cambio

• La propiedad de destino muestra qué objeto desencadena el cambio

• la propiedad de devolución de llamada puede llevarnos al controlador del cambio

Consideremos otro ejemplo y agreguemos un evento de clic usando Angular:

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

Una vez que hacemos clic en ese h2elemento, debemos observar lo siguiente:

Es posible que se sorprenda de que ahora la propiedad de devolución de llamada no nos trajo a la testdevolución de llamada de inmediato, sino que mostramos algo de contenedor @angular/platform-browser package. Y otros casos también pueden diferir, pero ZoneTask.source propiedad es por lo general todo lo que necesita en estos casos, ya que muestra que la causa fundamental del cambio .