Angular 2 - Crochets de cycle de vie

L'application Angular 2 passe par un ensemble complet de processus ou a un cycle de vie depuis son lancement jusqu'à la fin de l'application.

Le diagramme suivant montre l'ensemble des processus du cycle de vie de l'application Angular 2.

Voici une description de chaque hook de cycle de vie.

• ngOnChanges - Lorsque la valeur d'une propriété liée aux données change, cette méthode est appelée.

• ngOnInit - Ceci est appelé chaque fois que l'initialisation de la directive / du composant après que Angular affiche d'abord les propriétés liées aux données se produit.

• ngDoCheck - C'est pour la détection et pour agir sur les changements qu'Angular ne peut pas ou ne détectera pas par lui-même.

• ngAfterContentInit - Ceci est appelé en réponse après que Angular projette du contenu externe dans la vue du composant.

• ngAfterContentChecked - Ceci est appelé en réponse après qu'Angular ait vérifié le contenu projeté dans le composant.

• ngAfterViewInit - Ceci est appelé en réponse après qu'Angular a initialisé les vues du composant et les vues enfants.

• ngAfterViewChecked - Ceci est appelé en réponse après qu'Angular vérifie les vues du composant et les vues enfants.

• ngOnDestroy - C'est la phase de nettoyage juste avant qu'Angular ne détruit la directive / le composant.

Voici un exemple d'implémentation d'un hook de cycle de vie. dans leapp.component.ts fichier, placez le code suivant.

import { 
   Component 
} from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<div> {{values}} </div> ' 
}) 

export class AppComponent { 
   values = ''; 
   ngOnInit() { 
      this.values = "Hello"; 
   } 
}

Dans le programme ci-dessus, nous appelons le ngOnInit hook de cycle de vie pour mentionner spécifiquement que la valeur du this.values le paramètre doit être défini sur «Hello».

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.