Fonctionnement de la détection des changements
Comprenez le cycle de détection des changements d’Angular
Fonctionnement de la détection des changements est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Qu’est-ce que la détection des changements ?
La détection des changements est le processus qu’Angular utilise pour maintenir le DOM synchronisé avec l’état de votre composant. Lorsque les données changent, Angular réévalue les liaisons et ne met à jour que ce qui diffère.
Le cycle de détection
Angular parcourt l’arbre des composants depuis la racine vers le bas, en vérifiant les liaisons de chaque composant. Ce parcours descendant constitue un cycle de détection des changements (tick).
Qu’est-ce qui déclenche un tick ?
Par défaut, Angular exécute la détection des changements après les événements asynchrones : événements du DOM, temporisateurs et réponses HTTP. Cette coordination est assurée par Zone.js.
Zone.js
Zone.js modifie les API asynchrones (setTimeout, addEventListener, Promise, XHR) afin qu’Angular sache quand l’une d’elles se termine et qu’un tick peut être nécessaire.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone encapsule Zone.js pour Angular. Vous pouvez exécuter du code en dehors de la zone Angular afin d’éviter de déclencher la détection des changements dans les boucles intensives.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});Réintégrer la zone
Pour mettre à jour l’interface depuis l’extérieur de la zone, réintégrez-la avec run afin qu’Angular planifie un tick.
this.zone.run(() => {
this.ready = true;
});Stratégie par défaut
Avec la stratégie par défaut, chaque composant est vérifié à chaque tick. Cette approche est simple et sûre, mais peut être coûteuse dans les grands arbres.
Comparaison des liaisons
Angular compare la valeur actuelle de chaque liaison avec sa valeur précédente à l’aide de Object.is. Si elle n’a pas changé, le DOM n’est pas modifié.
Les expressions doivent être pures
Les expressions du modèle sont exécutées à chaque vérification ; elles doivent donc être rapides et dépourvues d’effets secondaires. Évitez d’appeler directement des fonctions coûteuses dans les modèles.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
En mode développement, Angular exécute un second parcours de vérification. Si une valeur change entre les deux parcours, vous obtenez ExpressionChangedAfterItHasBeenCheckedError, ce qui indique que l’état a été modifié pendant l’affichage.
Contrôle manuel
Injectez ChangeDetectorRef pour contrôler la détection : markForCheck(), detectChanges() et detach() offrent un contrôle précis.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();Vérification rapide
Testez votre compréhension de la détection des changements.
Récapitulatif
Vous avez appris que la détection des changements est un parcours descendant de l’arbre qui synchronise l’état avec le DOM. Elle est déclenchée par les événements asynchrones via Zone.js/NgZone et compare les liaisons avec Object.is. ChangeDetectorRef permet un contrôle manuel.
Questions Fréquemment Posées
La leçon « Fonctionnement de la détection des changements » est-elle gratuite ?
Oui — le texte complet de « Fonctionnement de la détection des changements » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fonctionnement de la détection des changements » ?
Comprenez le cycle de détection des changements d’Angular Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Fonctionnement de la détection des changements » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement de la détection des changements
- Détection des changements avec OnPush
- Angular sans zone
- Optimiser les listes et le rendu