Ganchos del ciclo de vida en Angular 2

En este tutorial vamos a ver como funcionan los ganchos del ciclo de vida en Angular 2.

Si alguna vez has utilizado ngOnInit o ngOnDestroy, ya los has usado antes. Vamos a ver que otros ganchos hay y como usarlos.

Componentes y Directivas

Los componentes y directivas tienen ganchos del ciclo de vida que Angular nos proporciona para poder interactuar con ellos en momentos claves de la existencia de estos objetos. Los componentes tienen los mismos ganchos que las directivas más otros específicos al contenido y las vistas del componente.

Estos ganchos del ciclo de vida los podemos llamar como interfaces que son parte de la librería core de Angular.

Cada una de estas interfaces tiene un método que tiene el mismo nombre de la interface pero con el prefijo ng.

En la siguiente tabla podemos ver la secuencia de llamado de los ganchos del ciclo de vida y cuando son llamados.

Nombre de la Interface Nombre del método o gancho Descripción
OnChanges ngOnChanges Responde cuando Angular restablece propiedades de entrada vinculadas a datos. El método recibe un objeto SimpleChanges de los valores de propiedad actuales y anteriores. Este gancho es llamado antes de ngOnInit y cuando una o más propiedades de entrada enlazadas a datos cambien.
OnInit ngOnInit Inicializa la directiva o el componente una vez Angular haya mostrado las propiedades vinculadas a datos y establece las propiedades de entrada de la directiva o el componente. Es llamado solo una vez, después del primer llamado a ngOnChanges.
DoCheck ngDoCheck Detecta y actúa sobre los cambios que Angular no puede por sí solo. Se llama durante cada detección de cambios, inmediatamente después de ngOnChanges y ngOnInit.
AfterContentInit ngAfterContentInit Es activado después de que Angular proyecte contenido externo en la vista del componente.,Se llama una vez después del primer NgDoCheck. Este gancho de vida solo existe en los componentes.
AfterContentChecked    ngAfterContentChecked    Responde después de que Angular comprueba el contenido proyectado en el componente. Es llamado después del ngAfterContentInit y cada NgDoCheck posterior. Este gancho de vida solo existe en los componentes.
AfterViewInit ngAfterViewInit Responde después de que Angular inicializa las vistas del componente y las vistas secundarias. Se llama una vez después del primer ngAfterContentChecked. Este gancho de vida solo existe en los componentes.
AfterViewChecked ngAfterViewChecked Responde después de que Angular comprueba las vistas del componente y las vistas secundarias.,Se llama después de ngAfterViewInit y cada ngAfterContentChecked posterior. Este gancho de vida solo existe en los componentes.
OnDestroy ngOnDestroy Es llamado justo antes de que Angular destruya la directiva o el componente. Anula la suscripción de observables y desconecta los manejadores de eventos para evitar fugas de memoria.

Las interfaces no son necesarias

Técnicamente, no es necesario usar las interfaces en nuestras aplicaciones de Angular ya que JavaScript no tiene interfaces. Y aunque TypeScript si las tiene una vez la transpilación ocurre desaparecen del código de JavaScript.

Angular va a revisar nuestro codigo y si encuentra alguno de los métodos de gancho definidos en nuestras clases simplemente los llama en el momento adecuado.

Aunque las interfaces no sean requeridas, usarlas es una buena práctica de programación y para poder aprovechar las herramientas que nos ofrecen los IDEs.

En este ejemplo de plunker (en ingles) podemos ver ganchos del ciclo de vida en acción:

19 Enero, 2017

0 respuestas en "Ganchos del ciclo de vida en Angular 2"

Deja un mensaje

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Aprende Fácilmente© Todos los derechos reservados