Changer la détection en angulaire: tout ce que vous devez savoir

Analyse approfondie du mécanisme de détection des changements angulaires

Cet article explorera en profondeur le mécanisme de détection des changements d'Angular, révèlera ses principes de fonctionnement sous-jacents et fournira des stratégies d'optimisation. Il y a relativement peu d'informations sur ce sujet sur Internet.

Concept Core: View (View)

Les applications angulaires ne sont pas composées uniquement de composants, mais affichent les arbres. Chaque composant correspond à une vue, qui est l'unité de base de l'architecture de l'interface utilisateur angulaire, et est responsable de la gestion de toutes les vérifications de la propriété et des mises à jour DOM. La description de la vue dans le code source est la suivante:

La vue est l'élément de base de l'interface utilisateur de l'application. C'est le plus petit groupe d'éléments créés et détruits ensemble.

Les propriétés des éléments dans la vue peuvent être modifiées, mais la structure (nombre et ordre) des éléments dans la vue ne peut pas être modifiée. La modification de la structure d'un élément ne peut être effectuée qu'en insérant, en déplaçant ou en supprimant des vues imbriquées à l'aide de ViewContainerRef. Chaque vue peut contenir plusieurs conteneurs de vue.

Dans cet article, nous utilisons des vues de composants et des concepts de composants de manière interchangeable. Il convient de noter que de nombreux articles Web et des réponses de débordement de pile se réfèrent à la vue décrite ici comme "Modifier l'objet de détection" ou "ModigetectorRef". En fait, il n'y a pas d'objet de détection de changement distinct dans Angular, la détection des changements agit directement sur la vue.

Chaque vue est liée à sa sous-vue via la propriété nodes, permettant de réaliser des actions sur la sous-vue.

Affichage de l'état (ViewState)

Les vues ont des états, qui jouent un rôle clé pour décider s'il faut exécuter la détection des changements pour une vue et tous ses sous-vues. Les états importants comprennent:

1. FirstCheck: Indique si la vue est la première vérification.
2. ChecksEnabled: Indique s'il faut permettre la détection du changement de la vue.
3. Errored: indique si une erreur s'est produite dans la vue.
4. Destroyed: indique si la vue a été détruite.

Si ChecksEnabled est false, ou si la vue est dans l'état Errored ou Destroyed, la détection de changement de la vue et de ses sous-vues est ignorée. Par défaut, toutes les vues sont initialisées avec ChangeDetectionStrategy.OnPush sauf si ChecksEnabled est utilisée.

Angular fournit des concepts avancés pour manipuler des vues, telles que ViewRef, qui résume la vue sous-jacente et possède une méthode detectChanges. Lorsqu'un événement asynchrone se produit, Angular déclenche sa détection de changement de niveau de haut niveau, qui détecte récursivement la sous-vue après sa propre détection de changement. ViewRef ViewRef le

: ChangeDetectorRef ViewRef

export class AppComponent {
  constructor(cd: ChangeDetectorRef) { ... }
}

Les fonctions

checkAndUpdateView sont la logique principale responsable de l'exécution de la détection du changement de vue. La fonction s'appelle récursivement, à partir du composant hôte, en vérifiant à son tour chaque composant et ses sous-composants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!