Diferencias entre Constructor y ngOnInit en Angular

Al crear un componente a partir de la versión 2 de Angular, por defecto se crean los métodos constructor() y ngOnInit(). Ambos tienen un comportamiento parecido, pero no son exactamente iguales. Si fueran iguales no estarían separados. Así que vamos a ver las diferencias entre Constructor y ngOnInit.

El método Constructor

Constructor es un método por defecto de la clase typescript, el cual se ejecuta en el momento en el que la clase es instanciada. Se encarga de asegurar la correcta inicialización de los campos, tanto de la clase como de sus subclases.

El inyector de dependencias (DI) de Angular analiza los parámetros que se le pasan, de manera que cuando se crea una nueva instancia con new Mi Clase(), intenta localizar los métodos que encajan con los tipos de los parámetros pasados al constructor. Entonces los resuelve y se los pasa al constructor.

Al ser un método proporcionado por typescript y no por Angular, sólo debería utilizarse para acciones relacionadas con la inyección de dependencias typescript, así como para inicializar sus variables de clase. Pero no debería contener lógica de negocio, ya que para código propio de Angular se debería utilizar ngOnInit. De esta manera, las tareas del constructor deberían de ser muy ligeras.

El método ngOnInit

ngOnInit forma parte del ciclo de vida de Angular y se lanza cuando se ha completado la creación del componente. Al no ser parte de typescript, se debe importar para poder usarlo.

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

No es obligatorio, pero sí que es una buena práctica implementar OnInit. De manera, que el esqueleto de la clase podría ser como el siguiente.

export class App implements OnInit{
  constructor(){
     //llamado antes de ngOnInit()
  }

  ngOnInit(){
     //llamado después del constructor y después del primer ngOnChanges() 
  }
}

Se debería utilizar ngOnInit para las inicializaciones de las variables, evitando hacerlas en el constructor.

Espero que te haya quedado un poco más clara la diferencia entre constructor y ngOnInit. Son métodos que si trabajas con Angular estarás harto de ver, pero a lo mejor no te habías puesto a averiguar sus características.

Si no te ha terminado de quedar claro no dudes en dejar tus preguntas en los comentarios. Si crees que puede ser de utilidad, no dudes en compartirlo.

Deja un comentario

Pin It on Pinterest