Hoy vamos a hablar acerca de los hooks de Angular 4 del ciclo de vida de un componente.
Estos hooks son eventos que se ejecutan en un momento dado del ciclo de vida del componente, es decir, son eventos que se van a lanzar dependiendo del estado del componente. Por ejemplo, cuando iniciemos el componente, cuando hagamos algún cambio en el componente, etc.
Veamos algún ejemplo de como trabajar con los Hooks de Angular 4.
ngOnChanges
Este método va a ser el primero que se va a ejecutar, se va a ejecutar el primero de todos y tambien se va a ejecutar cuando se produce algun cambio en los valores de las propiedades de nuestro componente.
Para usarlo hay que importar las clases OnChanges y SimpleChanges:
import { Component, OnChanges, SimpleChanges } from '@angular/core';
Después implementar la interfaz OnChanges en la clase del componente:
export class EjemploComponent implements OnChanges{
Y por ultimo definir el método ngOnChanges que se ejecutara al cargar el componente o hacer cambios en las propiedades.
ngOnChanges(changes: SimpleChanges){
console.log(changes);
}
El parámetro changes de tipo SimpleChanges es un objeto que incluye los cambios realizados en las propiedades.
ngOnInit
El hook ngOnInit se ejecuta cuando cargamos la directiva de nuestro componente, es el primer método que se ejecuta después de lanzar el constructor de la clase del componente.
Para utilizarlo tenemos que importar las clases OnInit:
import { Component, OnInit } from '@angular/core';
Después implementar la interfaz OnInit en la clase del componente:
export class EjemploComponent implements OnInit{
Y por ultimo definir el método ngOnInit que se ejecutara al mostrar el componente.
ngOnInit(){
console.log('Metodo on init lanzado');
}
DoCheck
El método DoCheck se ejecuta cada vez que se produce algún cambio en el componente o en la aplicación de Angular y es un método que se va a estar ejecutando frecuentemente.
Para utilizarlo tenemos que importar las clases OnInit:
import { Component, DoCheck } from '@angular/core';
Después implementar la interfaz DoCheck en la clase del componente:
export class EjemploComponent implements DoCheck {
Y por ultimo definir el método ngDoCheck que se ejecutara cuando se produzca cualquier cambio o evento.
ngDoCheck(){
console.log('Método DoCheck lanzado');
}
OnDestroy
Además tenemos otro evento Hook en Angular 4 que se ejecuta justo antes de eliminar la instancia de un componente, este es el método ngOnDestroy:
ngOnDestroy(){
console.log('Se va a eliminar el componente');
}
Con esto ya hemos visto los hooks del ciclo de vida de los componentes de Angular 4 más importantes y como usarlos de manera básica.
