Fonctionnement de la Change Detection
Dernière mise à jour
Dernière mise à jour
Angular adopte une afin de maintenir en synchronisation le modèle et la vue.
Chaque composant dispose d'un "change detector" qui comme son nom l'indique se charge de détecter les changements de modèle concernant la vue et de mettre à jour la vue en conséquence.
Le "Change Detector" est fortement couplé à la vue du composant associé. Cela lui permet d'analyser la liste des expressions utilisées dans la vue (i.e. ou ) en les comparant à la dernière valeur retournée par chacune d'elles.
Si la valeur retournée par l'expression change, la vue est mise à jour en conséquence.
Pour détecter les changements, Angular utilise la librairie dont le rôle est d'encapsuler et d'intercepter tous les appels asynchrones (e.g. setTimeout, event listeners etc...).
Avant le chargement d'Angular, Zone.js procède au des fonctions natives permettant d'inscrire des "callbacks" associées à des traitements asynchrones (e.g. setTimeout) afin de pouvoir détecter chaque "tick" et notifier Angular.
A la fin de chaque "tick" (détecté grâce à Zone.JS), Angular déclenche la "Change Detection" du "Root Component".
En cas de changement, l'élément concerné est mis à jour dans la vue.
Le "Change Detector" de chaque "child component" est ensuite déclenché et l'étape 2 est reproduite pour chaque composant de façon récursive.
[Uniquement en mode développement] Angular relance l'intégralité de la "Change Detection" pour s'assurer que les valeurs retournées par les expressions ne changent pas. Cela permet de détecter les problèmes de conception ou d'implémentation tels que le changement du modèle par effet de bord ou les expressions dont le résultat est aléatoire.
Le "Change Detector" du composant compare les anciennes et les nouvelles valeurs de chaque expression utilisée dans les bindings ( ou ).
