Angular 2 - Ganchos de ciclo de vida

La aplicación Angular 2 pasa por un conjunto completo de procesos o tiene un ciclo de vida desde su inicio hasta el final de la aplicación.

El siguiente diagrama muestra todos los procesos en el ciclo de vida de la aplicación Angular 2.

A continuación se muestra una descripción de cada enlace del ciclo de vida.

  • ngOnChanges - Cuando cambia el valor de una propiedad vinculada a datos, se llama a este método.

  • ngOnInit - Esto se llama siempre que ocurre la inicialización de la directiva / componente después de que Angular muestra por primera vez las propiedades vinculadas a los datos.

  • ngDoCheck - Esto es para la detección y para actuar sobre cambios que Angular no puede o no detecta por sí solo.

  • ngAfterContentInit - Esto se llama en respuesta después de que Angular proyecta contenido externo en la vista del componente.

  • ngAfterContentChecked - Esto se llama en respuesta después de que Angular verifica el contenido proyectado en el componente.

  • ngAfterViewInit - Esto se llama en respuesta después de que Angular inicializa las vistas del componente y las vistas secundarias.

  • ngAfterViewChecked - Esto se llama en respuesta después de que Angular verifica las vistas del componente y las vistas secundarias.

  • ngOnDestroy - Esta es la fase de limpieza justo antes de que Angular destruya la directiva / componente.

A continuación se muestra un ejemplo de implementación de un enlace de ciclo de vida. En elapp.component.ts archivo, coloque el siguiente código.

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

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

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

En el programa anterior, llamamos al ngOnInit gancho del ciclo de vida para mencionar específicamente que el valor de la this.values El parámetro debe establecerse en "Hola".

Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.