Ciclo de vida de componentes angulares: métodos, diferentes tipos e interfaz

Introducción

La plataforma del lado del cliente que permite la creación de aplicaciones tanto para la web como para dispositivos móviles es angular. Fue introducido en 2009 por Google. Inicialmente, la plataforma admitía Javascript y HTML, que fueron reemplazados por Angular TypeScript y otros lenguajes de secuencias de comandos.

Se han desarrollado muchas versiones de Angular con AngularJS a Angular-7, etc. Cualquiera que sea la versión, el angular generalmente se construye con componentes. Por lo tanto, comprender los componentes es importante para obtener una comprensión clara del procesamiento de los componentes.

Sin embargo, cada componente de angular tiene un estilo de vida específico en el que cada etapa del ciclo de vida de angular pasa por los pasos de inicialización hasta los pasos de destrucción.

El artículo se centrará en los eventos del ciclo de vida de los diferentes componentes de angular.

Métodos de ciclo de vida

Los componentes dentro de angular tienen un ciclo de vida diferente y un número definido de etapas a través de las cuales se lleva a cabo el proceso de inicialización a destrucción. Las diferentes etapas de los componentes se conocen como el "evento de gancho del ciclo de vida".

Para controlar los componentes dentro de angular, los desarrolladores pueden usar los eventos de enlace en diferentes fases de la aplicación. Hay ocho tipos de eventos de enlace de ciclo de vida que los desarrolladores pueden usar en cualquiera de los componentes de angular. El desarrollador debe agregar la llamada de función correspondiente al evento de ciclo de vida específico.

Un método constructor debe estar presente para cada componente, ya que los componentes pertenecen a una clase de mecanografiado. Siempre es el constructor de clase de componente el que se ejecuta primero antes de la ejecución de cualquiera de los ganchos del ciclo de vida angular . Para agregar dependencias, el constructor se puede usar para la tarea requerida. Los ganchos del ciclo de vida angular se ejecutan en un orden específico.

Cada vez que hay una inicialización de cualquier componente en angular, se crean y presentan componentes raíz. Entonces se produce el heredero de los componentes.

La división de las etapas del ciclo de vida se produce en dos fases: una fase que se vincula con el componente y otra que se vincula con los elementos secundarios del componente.

Lea también: Emocionantes ideas de proyectos angulares

Los diferentes tipos de gancho de ciclo de vida

1. ngEnCambios –

Este evento se llama cada vez que hay un cambio en el valor de control de la entrada. El cambio en el valor de una propiedad que está enlazada dispara este evento. Un mapa de datos que contiene los cambios, es decir, el valor anterior y actual de la propiedad dentro de un SimpleChange.

• Propiedades
  • Los componentes que tienen una entrada pueden usar el método.
  • Cada vez que hay un cambio en el valor de la entrada, se invoca el método.

2. ngOnInit

Después de la inicialización del componente o la visualización de las propiedades de los datos vinculados, se inicializa el evento de ngOnInit. El evento se llama una vez solo después del evento ngOnChanges. Por lo tanto, el evento es el principal responsable de inicializar los datos de los componentes.

• Propiedades
  • Los datos en un componente son inicializados por este evento.
  • El método se llama cuando se establecen los valores de la entrada.
  • Angular CLI ha agregado por defecto este gancho a todos sus componentes.
  • El método puede ser llamado solo una vez.

3. ngDoCheck

Después de verificar las propiedades de entrada de los componentes angulares, se produce la activación del evento ngDoCheck. Se realiza principalmente para detectar o actuar sobre cualquier cambio que angular no detecte. Según la lógica del desarrollador, se puede implementar la comprobación. Por lo tanto, el evento permite la implementación de cualquier lógica de cambio personalizada o algoritmos para la detección de cambios en cualquier componente.

• Propiedades
  • Para cualquier detección de cambios angulares ejecuta este método.
  • El método se llama para detectar cambios.

4. ngAfterContentInit –

Después de la proyección del contenido externo dentro de la vista del componente, se llama al evento ngAfterContentInit. Para verificar todos los enlaces de componentes por primera vez, este método se ejecuta por primera vez. Su ejecución sigue tan pronto como la ejecución del método ngDoCheck(). El componente secundario suele estar vinculado con este método.

• Propiedades
• • Inicialmente, el método se llama después de ngDoCheck.

• • El trabajo se realiza mediante la inicialización del contenido.

5. ngAfterContentChecked –

A la proyección del contenido externo en el componente le sigue la comprobación del contenido proyectado. El método es llamado cada vez que se realiza el check in del contenido a través del mecanismo de detección de cambios de angular. Se ejecuta después de la ejecución del método ngAfterContentInit(). Además, el método se ejecuta después de la ejecución posterior de ngDoCheck(). Por lo general, está vinculado con la inicialización de los componentes secundarios.

• Propiedades

• • Para comenzar, el método espera a que se complete ngContentInit.

• • La ejecución se realiza después de ngDocheck.

6. ngAfterViewInit

Con la inicialización de los componentes angulares y los componentes secundarios, se llama al método de ngAfterViewInit. Después de la ejecución del método ngAfterContentChecked, se llama al método ngAfterViewInit por primera vez. El método es aplicable solo a los componentes de angular.

• Propiedades

  • Solo una vez que se genera la llamada para el método después de inicializar la vista del componente.

7. ngAfterViewChecked –

Justo después del método ngAfterViewInit, se llama al método ngAfterViewChecked. Cada vez que el método de detección de cambios de angular realiza sus comprobaciones sobre los componentes, se ejecuta el método de ngAfterViewChecked. El método también se ejecuta después de la ejecución de ngAfterContentChecked(). Además, cuando se cambia el enlace de las directivas del componente secundario, el método se ejecuta.

• Propiedades

• • La llamada se genera después de la inicialización y verificación.

• • El trabajo del método se inicia después de la finalización de cada método de ngDocheck.

8. ngOnDestroy

El método se llama justo antes de la destrucción de los componentes por angular. Para evitar escenarios de fugas de memoria, el método puede desconectar controladores de eventos y también es útil para cancelar la suscripción de observables. Solo por una vez, se llama al método para eliminar el componente del DOM.

• Propiedades

• • La llamada se genera justo antes de la eliminación de componentes de DOM.

Interfaces en Angular Lifecycle

La clase de los componentes se puede utilizar para definir los métodos de enlace del ciclo de vida angular . Sin embargo, con la ayuda de las interfaces, se pueden invocar los métodos. Los nombres de las interfaces son similares a los de los métodos, omitiendo el prefijo “ng”. Esto se debe a la presencia de una interfaz mecanografiada con cada uno de los métodos de los enlaces del ciclo de vida. Por ejemplo, la interfaz de ngOnInit se llama OnInit. Solo se define un evento del enlace del ciclo de vida a través de una sola interfaz. Además, el compilador no arroja ningún error de compilación cuando las interfaces no están implementadas.

Ejemplo:

Se ha mostrado un ejemplo para implementar un enlace de ciclo de vida. El código que se muestra a continuación debe colocarse en el archivo 'app.component.ts'. Fuente

Muestra cómo llamar al gancho de ciclo de vida ngOnInit.

A continuación se muestra un ejemplo de cómo agregar un módulo al repositorio 'ng-example'. El nombre del módulo es lifecycle-hooks, que tiene componentes (tanto principal como secundario) para un ejemplo de 'ngOnChanges' llamado changes-example. Para el enrutamiento a los ganchos del ciclo de vida del componente, el enrutamiento se agrega a la barra lateral y el componente 'cambios-ejemplo' se coloca dentro de ese componente. Esto muestra el componente principal junto con el componente secundario.

Todos los métodos de los ganchos del ciclo de vida se agregarán a ambos componentes junto con el nombre del gancho de eventos llamado console.log(). El elemento secundario se agrega a las instrucciones de la consola secundaria para diferenciar los componentes principales y secundarios.

El aspecto del componente principal se muestra a continuación.

Fuente

El componente secundario es idéntico pero es parte de las declaraciones de console.log.

La ejecución del servicio ng mostrará el orden de activación de los eventos. Describe el orden de ejecución de los métodos. Inicialización del componente, su contenido, verificación del contenido, inicialización y verificación del componente secundario. Le sigue la declaración final de que la vista del componente está inicializada y comprobada.

Lea también: Cómo ejecutar el Proyecto Angular

En el siguiente paso, el componente principal se agrega con un evento simple donde se manipula algún valor de una entrada para el elemento secundario. Para esto, se agrega un botón al componente principal que, al hacer clic, aumentará el número en un valor de uno. El incremento se pasará al niño como entrada y se mostrará.

Fuente

El aspecto del html principal es

La entrada 'num' se muestra como:

<h4>{{número}}</h4>

Al hacer clic en el botón '+', se disparará un evento donde los eventos de los enlaces de ciclo de vida se ejecutarán sobre los componentes. El evento 'ngOnChanges' se activa en el elemento secundario cuando 'ngOnChanges' detecta el valor de entrada para el elemento secundario.

Aprenda cursos de software en línea de las mejores universidades del mundo. Obtenga programas Executive PG, programas de certificados avanzados o programas de maestría para acelerar su carrera.

Conclusión

El artículo proporcionó una descripción general de las etapas de los componentes angulares. Se analiza el orden específico en el que proceden los ganchos del ciclo de vida angular y también se muestra la aplicación de tales eventos.

Para ampliar la aplicación de dichos componentes de software, puede consultar el curso de upGrad , " Programa PG ejecutivo en desarrollo de software - Especialización en desarrollo de pila completa ". Cualquier profesional de nivel medio dentro de los 21 a 45 años de edad puede unirse al curso certificado de IIIT-Bangalore . El curso en línea ofrece los beneficios de conferencias en vivo, experiencias prácticas, el estado de ex alumnos de IIIT-B y una certificación de 4 meses en ciencia de datos y aprendizaje automático sin costo. Si todavía tiene como objetivo conseguir el trabajo de sus sueños, realice el curso que garantiza ubicaciones en las principales industrias. Cualquier consulta es bienvenida por nuestro equipo.