Comment trouver quelle action asynchrone déclenche ngZone (qui mène à la détection de changement)?

Toute modification de la trace de pile des mises à jour revient toujours à globalZoneAwareCallback. Comment trouvez-vous ce qui a déclenché le changement?

En termes de débogage, il est bon d'avoir une image claire.

globalZoneAwareCallbackest une fonction déclarée dans zonejs pour gérer tous les rappels d'événements avec capture=false. (btw, car capture=trueil y a globalZoneAwareCaptureCallback)

Cela signifie que tout écouteur d'événements passera d'abord par cette méthode. Cet écouteur peut être ajouté sur la page par Angular, par vous ou par n'importe quelle bibliothèque tierce.

Il existe de nombreuses façons d'écouter les événements du navigateur dans Angular:

• s'abonner à l'événement du navigateur <element (event)="callback()">

• @HostListener décorateur @HostListener('event') callback() {}

• Renderer2.listen méthode

• rxjs fromEvent

• attribuer une propriété d'élément element.on<event> = callback

• Méthode addEventListener element.addEventListener(event, callback)(cette méthode est utilisée en interne de nombreuses autres manières ci-dessus)

Une fois à l'intérieur, globalZoneAwareCallbackvous avez accès à toutes les tâches de zone qui doivent être déclenchées.

Imaginons que nous écoutions l' clickévénement sur document.body:

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

Ouvrons les outils de développement Chrome pour avoir une image claire:

Ce que nous venons de découvrir:

• chaque tâche de zone contient la source c'est donc ce qui déclenche le changement

• la propriété cible indique quel objet déclenche la modification

• la propriété de rappel peut nous conduire au gestionnaire du changement

Prenons un autre exemple et ajoutons un événement de clic en utilisant la méthode angulaire:

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

Une fois que nous avons cliqué sur cet h2élément, nous devons observer ce qui suit:

Vous pourriez être surpris que la propriété de rappel ne nous amène pas testimmédiatement au rappel, mais nous avons plutôt montré un wrapper de @angular/platform-browser package. Et d'autres cas peuvent également différer, mais la propriété ZoneTask.source est généralement tout ce dont vous avez besoin dans ces cas, car elle vous montre la cause première du changement .