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


11

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.


¿Le importaria explicar?
user2167582

¡Tu pregunta es totalmente ambigua!
nimeresam

@nimeresam ¿Cómo es eso? es general estoy de acuerdo, pero ambiguo?
user2167582

2
He actualizado la pregunta, espero que te ayude
Stepan Suvorov

Respuestas:


31

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:

ingrese la descripción de la imagen aquí

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:

ingrese la descripción de la imagen aquí

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 .


Gracias señor, esa fue una gran respuesta. Me gustaría poder duplicar la recompensa.
user2167582
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.