Angular 2 - Ganci del ciclo di vita

L'applicazione Angular 2 passa attraverso un intero set di processi o ha un ciclo di vita dal suo inizio alla fine dell'applicazione.

Il diagramma seguente mostra gli interi processi nel ciclo di vita dell'applicazione Angular 2.

Di seguito è riportata una descrizione di ogni hook del ciclo di vita.

  • ngOnChanges - Quando il valore di una proprietà associata a dati cambia, viene chiamato questo metodo.

  • ngOnInit - Questo viene chiamato ogni volta che si verifica l'inizializzazione della direttiva / componente dopo che Angular ha visualizzato per la prima volta le proprietà associate ai dati.

  • ngDoCheck - Questo serve per il rilevamento e per agire sui cambiamenti che Angular non può o non rileva da solo.

  • ngAfterContentInit - Questo viene chiamato in risposta dopo che Angular proietta il contenuto esterno nella vista del componente.

  • ngAfterContentChecked - Questo viene chiamato in risposta dopo che Angular ha verificato il contenuto proiettato nel componente.

  • ngAfterViewInit - Questo viene chiamato in risposta dopo che Angular ha inizializzato le viste del componente e le viste figlio.

  • ngAfterViewChecked - Questo viene chiamato in risposta dopo che Angular ha verificato le visualizzazioni del componente e le visualizzazioni figlio.

  • ngOnDestroy - Questa è la fase di pulizia appena prima che Angular distrugga la direttiva / componente.

Di seguito è riportato un esempio di implementazione di un hook del ciclo di vita. Nelapp.component.ts file, inserire il codice seguente.

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

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

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

Nel programma sopra, chiamiamo il file ngOnInit lifecycle hook per menzionare specificamente che il valore di this.values il parametro dovrebbe essere impostato su "Hello".

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.