Qu’est-ce que la détection des changements ? L'article suivant parlera du mécanisme de détection des changements dans Angular, présentera comment les changements de statut notifient la détection des changements et la stratégie de détection des changements dans Angular. J'espère que cela sera utile à tout le monde.
Résumé : un检测机制des modifications qui parcourt l'arborescence des composants, vérifie les modifications dans chaque composant et déclenche les mises à jour DOM lorsque les propriétés des composants changent. [Tutoriels associés recommandés : "tutoriel angulaire"]
La tâche de base de la détection des changements : obtenir l'状态interne du programme et可见dans l'interface utilisateur. Cet état peut être n’importe quel objet, tableau ou type de données de base.
Les sources basées sur les événements appartiennent aux trois catégories suivantes :
Événements : clic sur la page, soumission, souris enfoncée...
XHR : obtenir des données du serveur backend
Minuteries : setTimeout(), setInterval()
Ces points ont une chose en commun, c'est qu'ils sont tous asynchrones, c'est-à-dire que toutes异步操作sont les facteurs racines qui peuvent provoquer des modifications des données, donc chaque fois que certaines opérations asynchrones sont effectuées, l'état de notre application peut changer. À ce stade, vous devez mettre à jour la vue
Dans Angular NgZone est connecté, qui surveille tous异步事件d'Angular. Angular réécrira (via Zone.js ) certaines des API du navigateur sous-jacentes au démarrage (interceptant violemment tous les événements asynchrones).
Il existe deux manières courantes de déclencher la détection des changements. L'une des méthodes est basée sur les hooks du cycle de vie des composants.
ngAfterViewChecked() {
console.log('cluster-master.component cd');
}Une autre méthode consiste à contrôler manuellement l'activation ou la désactivation de la détection des changements et à la déclencher manuellement.
constructeur (CD privé : ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}, 5000)
} Le noyau d'Angular est la composition.L'imbrication des composants finira par former un组件树détection des changements d'Angular peut être divisée en composants.Chaque composant a un变化检测器ChangeDetector correspondantChangeDetectorIl est concevable que ces détecteurs de changement forment également un arbre.
Dans Angular, chaque composant possède son propre détecteur de changement, ce qui nous permet de contrôler comment et quand la détection des changements est effectuée pour chaque composant.
Angular donne également aux développeurs la possibilité de personnaliser les stratégies de détection des changements.
par défaut :每次détection de changement entraînera une détection de changement du composant, y compris les changements d'état des其他组件et les changements dans les valeurs d'attributs internes des variables de référence本组件
Onpush : chaque détection de changement ignorera la vérification des changements de ce composant à moins que满足一些条件.
4.1 par défaut
Le mécanisme de détection des changements par défaut d'Angular est ChangeDetectionStrategy.Default . Après la fin de chaque rappel d'événement asynchrone, NgZone déclenchera整个组件树pour effectuer une détection des changements至上而下
4.2 onPush
Stratégie OnPush, utilisée pour跳过la détection des modifications d'un composant et所有子组件en dessous
En fait, après avoir défini la politique OnPush , il existe encore de nombreuses façons de déclencher la détection des changements ;
1)引用de l'attribut @Input du composant change.
2) Événements DOM au sein du composant, y compris les événements DOM de ses sous-composants, tels que click、submit、mouse down .
3) Observable dans le composant s'abonne à l'événement et définit Async pipe en même temps.
4) Utilisez manuellement ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() dans le composant.
markForCheck() : utilisé pour子组件该子组件到根组件, informant le détecteur angulaire一定vérifier les composants sur ce chemin lors de la prochaine détection de changement, même si la stratégie de détection de changement est définie sur onPush
detectChanges() : lancer manuellement la détection des modifications de该组件到各个子组件
detach() :脱离le détecteur du composant du nombre de détecteurs et ne sera plus contrôlé par le mécanisme de détection à moins qu'il ne soit reconnecté.
reattach() :重新链接le détecteur détaché à l'arborescence des détecteurs