Une brève discussion sur le cycle de vie des composants dans Angular

Cet article vous présentera le cycle de vie des composants (Component Lifecycle Hook) dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Environnement :

• CLI angulaire : 11.0.6

• Angulaire : 11.0.7

• Nœud : 12.18.3

• npm : 6.14.6

• IDE : Visual Studio Code

1.Résumé

Quand Angular instancie une classe de composant et restitue la vue du composant et ses sous-vues. , le cycle de vie de l'instance de composant commence. Le cycle de vie a toujours été accompagné d'une détection des modifications, avec une vérification angulaire lorsque les propriétés liées aux données ont changé et une mise à jour des instances de vue et de composant si nécessaire. Le cycle de vie se termine lorsque Angular détruit l'instance du composant et supprime le modèle qu'elle a rendu du DOM. Les directives ont un cycle de vie similaire car Angular crée, met à jour et détruit les instances pendant l'exécution. [Tutoriels associés recommandés : "Tutoriel angulaire"]

Votre application peut utiliser la méthode du hook de cycle de vie pour déclencher des événements clés dans le cycle de vie du composant ou de la directive afin d'initialiser de nouvelles instances en cas de besoin. détection des modifications, réponse aux mises à jour lors de la détection des modifications et nettoyage avant de supprimer l'instance.

2. Cycle de vie et séquence

• ngOnChanges() : répond lorsque Angular définit ou réinitialise la propriété d'entrée de la liaison de données.

• ngOnInit() : initialise une directive/un composant après qu'Angular affiche pour la première fois la liaison de données et définit les propriétés d'entrée de la directive/du composant.

• ngDoCheck() : appelé après ngOnChanges() chaque fois qu'une détection de changement est effectuée et ngOnInit() lorsque la détection de changement est effectuée pour la première fois.

• ngAfterContentInit() : appelé après qu'Angular projette du contenu externe dans la vue du composant ou dans la vue où se trouve la directive.

• ngAfterContentChecked() : ngAfterContentInit() et chaque appel après ngDoCheck()

• ngAfterViewInit() : lorsque Angular a initialisé la vue du composant et Appelé après sa sous-vue ou vue contenant cette directive.

• ngAfterViewChecked() : appelé après ngAfterViewInit() et chaque ngAfterContentChecked().

• ngOnDestroy() : appelé à chaque fois avant qu'Angular ne détruise une directive/un composant pour nettoyer et libérer des ressources.

3. Répondre aux événements du cycle de vie

Nous pouvons répondre aux composants en implémentant une ou plusieurs interfaces de hook de cycle de vie définies dans Angular ou Events. dans le cycle de vie des instructions. Chaque interface possède une méthode de hook unique et leurs noms sont composés du nom de l'interface plus le préfixe ng. Par exemple :

@Component()
export class DemoComponent implements OnInit {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
      // do something here
  }
}

Explication :

1) Pour répondre aux événements du cycle de vie via l'interface hook du cycle de vie, vous devez déclarer l'implémentation (les implémentations) du spécifique interface hook après le nom de la classe. Définissez ensuite une fonction hook dans le code à exécuter. Par exemple, ngOnInit() correspond à l'interface OnInit.

2) Plusieurs interfaces de hook peuvent être implémentées, telles que export class DemoComponent implements OnInit, OnDestroy {<!-- -->

4. Principaux événements du cycle de vie

. 4.1. Événement d'initialisation ngOnInit()

Utilisez la méthode ngOnInit() pour effectuer les tâches d'initialisation suivantes :

• La logique est légèrement compliqué et ne convient pas au placement Logique dans le constructeur

• Logique d'accès aux données lors de l'initialisation

• le traitement doit être initialisé en fonction du composant parent paramètres entrants (@Input) La logique de

4.2. Destruction d'instance ngOnDestroy()

Mettez la logique de nettoyage dans ngOnDestroy(), cette logique doit s'exécuter avant qu'Angular ne détruise la directive. La logique suivante peut être mise dans ngOnDestroy() :

• Se désabonner des observables et des événements DOM.

• Arrêtez le minuteur d'intervalle.

• Désenregistrer tous les rappels enregistrés globalement ou dans les services d'application par cette commande.

• Libérez les autres ressources occupées.

5. Résumé

• Utilisez la fonction de hook d'événement de cycle de vie, n'oubliez pas le implements après le nom de la classe en conséquence interface, sinon il ne prendra pas effet

• Code d'initialisation, distinguer lesquels mettre les constructeurs et lesquels mettre ngOnInit(); 🎜>

  Hooks qui peuvent être rationalisés Méthode d'événement pour éviter les problèmes de performances

• ngOnChanges() se produit très fréquemment, l'ajout d'une logique complexe affectera les performances

• Plus de détails sur la programmation Pour en savoir plus, veuillez visiter :
Introduction à la programmation

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!