Pregunta Diferencia entre Constructor y ngOnInit


Angular proporciona un gancho de ciclo de vida ngOnInit por defecto.

Porque deberia ngOnInit ser utilizado, si ya tenemos un constructor?


553
2018-03-03 05:14


origen


Respuestas:


los Constructor es un método predeterminado de la clase que se ejecuta cuando se crea una instancia de la clase y garantiza la inicialización adecuada de los campos en la clase y sus subclases. Angular o mejor Inyector de dependencia (DI) analiza los parámetros del constructor y cuando crea una nueva instancia llamando new MyClass() trata de encontrar proveedores que coincidan con los tipos de parámetros del constructor, los resuelve y los pasa al constructor como

new MyClass(someArg);

ngOnInit es un gancho de ciclo de vida llamado por Angular2 para indicar que Angular ha terminado de crear el componente.

Tenemos que importar OnInit para usar de esta manera (en realidad implementando OnInit no es obligatorio, pero se considera una buena práctica):

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

entonces para usar el método de OnInit tenemos que implementar en la clase de esta manera.

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

  ngOnInit(){
     //called after the constructor and called  after the first ngOnChanges() 
  }
}

Implemente esta interfaz para ejecutar una lógica de inicialización personalizada después de que se hayan inicializado las propiedades vinculadas a datos de su directiva.   ngOnInit se invoca justo después de que se hayan comprobado las propiedades de límite de datos de la directiva por primera vez,   y antes de que cualquiera de sus hijos haya sido revisado.   Se invoca solo una vez cuando se crea una instancia de la directiva.

Sobre todo usamos ngOnInit para toda la inicialización / declaración y evitar cosas para trabajar en el constructor. El constructor solo debe usarse para inicializar los miembros de la clase, pero no debe hacer un "trabajo" real.

Entonces deberías usar constructor() para configurar Inyección de Dependencia y no mucho más. ngOnInit () es el mejor lugar para "comenzar": es donde / cuando se resuelven los enlaces de los componentes.

Para obtener más información, consulte aquí:


625
2018-03-03 05:20



Creo que el mejor ejemplo sería usar servicios. Digamos que quiero tomar datos de mi servidor cuando mi componente se 'Activa'. Digamos que también quiero hacer algunas cosas adicionales con los datos después de obtenerlos del servidor, tal vez me da un error y quiero registrarlo de manera diferente.

Es realmente fácil con ngOnInit sobre un constructor, también limita cuántas capas de devolución de llamada necesito agregar a mi aplicación.

Por ejemplo:

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
    };


}

con mi constructor podría simplemente llamar a mi _userService y completar mi lista de usuarios, pero tal vez quiera hacer algunas cosas adicionales con ella. Al igual que asegúrese de que todo esté en mayúsculas, no estoy del todo seguro de cómo están llegando mis datos.

Por lo tanto, es mucho más fácil usar ngOnInit.

export class Users implements OnInit{

    user_list: Array<any>;

    constructor(private _userService: UserService){
    };

    ngOnInit(){
        this.getUsers();
    };

    getUsers(){
        this._userService.getUsersFromService().subscribe(users =>  this.user_list = users);
        this.user_list.toUpperCase();
    };


}

Hace que sea mucho más fácil de ver, así que solo llamo a mi función dentro de mi componente cuando lo inicializo en lugar de tener que buscarlo en otro lugar. Realmente es solo otra herramienta que puede usar para facilitar la lectura y el uso en el futuro. ¡También me parece una mala práctica poner llamadas a funciones dentro de un constructor!


69
2018-03-03 05:30



El artículo La diferencia esencial entre Constructor y ngOnInit en Angularexplora la diferencia desde perspectivas múltiples. Esta respuesta proporciona la explicación de la diferencia más importante relacionada con el proceso de inicialización del componente que también muestra el diferente uso.

El proceso de arranque angular consiste en las dos etapas principales:

  • construyendo un árbol de componentes
  • detección de cambio de funcionamiento

El constructor del componente se llama cuando Angular construye el árbol de componentes. Todos los enganches de ciclo de vida se llaman como parte de la detección de cambio de funcionamiento.

Cuando Angular construye el árbol de componentes, el inyector del módulo raíz ya está configurado para que pueda inyectar dependencias globales. Además, cuando Angular crea una instancia de una clase de componente secundario, el inyector para el componente principal también está configurado para que pueda inyectar proveedores definidos en el componente principal, incluido el componente principal. Los constructores de componentes son el único método que se llama en el contexto del inyector, por lo que si necesita alguna dependencia es el único lugar para obtener esas dependencias.

Cuando Angular inicia la detección de cambios, se construye el árbol de componentes y se invocan los constructores para todos los componentes del árbol. Además, los nodos de plantilla de cada componente se agregan al DOM. los @Input el mecanismo de comunicación se procesa durante la detección de cambios, por lo que no puede esperar tener las propiedades disponibles en el constructor. Estará disponible después ngOnInit.

Veamos un ejemplo rápido. Supongamos que tiene la siguiente plantilla:

<my-app>
   <child-comp [i]='prop'>

Entonces Angular comienza a arrancar la aplicación. Como dije, primero crea clases para cada componente. Entonces llama MyAppComponent constructor. También crea un nodo DOM que es el elemento de host del my-app componente. Luego procede a crear un elemento de host para el child-comp y llamando ChildComponent constructor. En esta etapa, no está realmente preocupado por el i encuadernación de entrada y cualquier gancho de ciclo de vida. Entonces, cuando este proceso finaliza, Angular termina con el siguiente árbol de vistas de componentes:

MyAppView
  - MyApp component instance
  - my-app host element data
       ChildCompnentView
         - ChildComponent component instance
         - child-comp host element data  

Solo entonces se ejecuta la detección de cambios y las actualizaciones de enlaces para el my-app y llamadas ngOnInit en la clase MyAppComponent. Luego procede a actualizar los enlaces para el child-comp y llamadas ngOnInit en la clase ChildComponent.

Puede hacer su lógica de inicialización en cualquier constructor o ngOnInit dependiendo de lo que necesitas disponible. Por ejemplo, el artículo Aquí se muestra cómo obtener ViewContainerRef antes de que se evalúe la consulta de @ViewChild muestra qué tipo de lógica de inicialización se puede requerir que se realice en el constructor.

Aquí hay algunos artículos que lo ayudarán a comprender mejor el tema:


60
2017-08-01 06:13



El primero (constructor) está relacionado con la instanciación de clase y no tiene nada que ver con Angular2. Quiero decir que un constructor se puede usar en cualquier clase. Puede ponerle algún proceso de inicialización para la instancia recién creada.

El segundo corresponde a un gancho de ciclo de vida de componentes Angular2:

Citado del sitio web oficial de angular:

  • ngOnChanges se invoca cuando cambia un valor de enlace de entrada o salida
  • ngOnInit se llama después de la primera ngOnChanges

Entonces deberías usar ngOnInit si el proceso de inicialización depende de los enlaces del componente (por ejemplo, los parámetros de los componentes definidos con @Input), de lo contrario, el constructor sería suficiente ...


41
2018-03-03 06:36



DE ACUERDO, ante todo ngOnInit es parte de Ciclo de vida angular, mientras constructor es parte de ES6 Clase de JavaScript, por lo que la diferencia principal comienza desde aquí! ...

Mira el siguiente gráfico que creé que muestra el ciclo de vida de Angular.

ngOnInit vs constructor

En Angular2 + usamos constructor para hacer el DI(Dependency Injection) para nosotros, mientras estábamos en Angular 1 estaba sucediendo al llamar al método String y verificar qué dependencia se inyectó.

Como ves en el diagrama de arriba, ngOnInit está sucediendo después de que el constructor esté listo y ngOnChnages y ser despedido después de que el componente esté listo para nosotros. Toda la inicialización puede ocurrir en esta etapa, una muestra simple está inyectando un servicio y lo inicializa en init.

OK, también comparto un código de muestra para que lo veas, mira cómo obtenemos el uso de ngOnInit y constructor en el código a continuación:

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


@Component({
 selector: 'my-app',
 template: `<h1>App is running!</h1>
  <my-app-main [data]=data></<my-app-main>`,
  styles: ['h1 { font-weight: normal; }']
})
class ExampleComponent implements OnInit {
  constructor(private router: Router) {} //Dependency injection in the constructor

  // ngOnInit, get called after Component initialised! 
  ngOnInit() {
    console.log('Component initialised!');
  }
}

37
2018-06-05 10:04



Una respuesta corta y simple sería,

Constructor : constructor es un default method carreras (por deafult) cuando el componente se está construyendo. Cuando creas an instance de una clase ese momento también constructor(default method) sería llamado. Entonces, en otras palabras, cuando el componente está siendo constructed or/and an instance is created constructor(default method) se llama y se llama el código relevante escrito dentro. Básicamente y generalmente en Angular2 Solía ​​inyectar cosas como services cuando el componente se está construyendo para su uso posterior.

OnInit: ngOnInit es el gancho del ciclo de vida del componente que se ejecuta primero después constructor(default method) cuando el componente se está inicializando

Entonces, se llamará primero a su constructor y se llamará a Oninit más tarde después del método de constructor.

boot.ts

import {Cmomponent, OnInit} from 'angular2/core';
import {ExternalService} from '../externalService';

export class app implements OnInit{
   constructor(myService:ExternalService)
   {
           this.myService=myService;
   }

   ngOnInit(){
     // this.myService.someMethod() 
   }
}

Recursos: Gancho LifeCycle

Puedes verificar esto pequeña demostración que muestra la implementación de ambas cosas.


24
2018-03-03 05:20



Para probar esto, escribí este código, tomando prestado del Tutorial de NativeScript:

usuario.ts

export class User {
    email: string;
    password: string;
    lastLogin: Date;

    constructor(msg:string) {        
        this.email = "";
        this.password = "";
        this.lastLogin = new Date();
        console.log("*** User class constructor " + msg + " ***");
    }

    Login() {
    }
}

login.component.ts

import {Component} from "@angular/core";
import {User} from "./../../shared/user/user"

@Component({
  selector: "login-component",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginComponent {

  user: User = new User("property");  // ONE
  isLoggingIn:boolean;

  constructor() {    
    this.user = new User("constructor");   // TWO
    console.log("*** Login Component Constructor ***");
  }

  ngOnInit() {
    this.user = new User("ngOnInit");   // THREE
    this.user.Login();
    this.isLoggingIn = true;
    console.log("*** Login Component ngOnInit ***");
  }

  submit() {
    alert("You’re using: " + this.user.email + " " + this.user.lastLogin);
  }

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;
  }

}

Salida de consola

JS: *** User class constructor property ***  
JS: *** User class constructor constructor ***  
JS: *** Login Component Constructor ***  
JS: *** User class constructor ngOnInit ***  
JS: *** Login Component ngOnInit ***  

15
2018-05-24 14:58



Las respuestas anteriores no responden realmente a este aspecto de la pregunta original: ¿Qué es un gancho de ciclo de vida? Me tomó un tiempo entender lo que eso significa hasta que lo pensé de esta manera.

1) Diga que su componente es un ser humano. Los seres humanos tienen vidas que incluyen muchas etapas de la vida, y luego expiramos.

2) Nuestro componente humano podría tener el siguiente guión del ciclo de vida: Nacido, Bebé, Escuela primaria, Adulto joven, Adulto de mediana edad, Adulto mayor, Muerto, Dispuesto de.

3) Di que quieres tener una función para crear niños. Para evitar que esto se vuelva complicado, y más bien gracioso, desea que su función solo se llame durante la etapa de Adulto Joven de la vida de los componentes humanos. Entonces usted desarrolla un componente que solo está activo cuando el componente padre se encuentra en la etapa de Adulto Joven. Los ganchos te ayudan a hacer eso al señalar esa etapa de la vida y dejar que tu componente actúe en consecuencia.

Cosas divertidas. Si dejas que tu imaginación llegue a codificar algo así, se vuelve complicado y divertido.


11
2017-12-09 19:52