Esta traducción de: Diferencia y la ngOnInit ENTRE Constructor
Proporciona enganche el ciclo de vida angular ngOnInitpor defecto. Angular proporcionada por ganchos del ciclo de vida por defecto ngOnInit.
En caso qué ngOnInitser utilizada, si ya hemos tienen una constructor? Si tenemos constructor, por eso su uso ngOnInites?
# 1 planta
Referencia: La diferencia entre el constructor y ngOnInit https://stackoom.com/question/2Q3mM/
Casa # 2
Of The Constructores un método de la clase predeterminada que se ejecuta de campos. Cuando instanciada y asegura la clase que es propio de inicialización de la clase y en las subclases ITS Constructores el método predeterminado de la clase, el método se realiza cuando se instancia la clase y para asegurar que la clase y correcta inicialización de los campos de la subclase. Mejor el inyector de Dependencia o el angular (DI) analiza y Parámetros El constructor cuando A crea nueva nueva instancia llamando new MyClass()intenta Conjunto de encontrar que los proveedores coinciden con los tipos de los parámetros del constructor, y pasa Resuelve ellos para el constructor como dependencia del ángulo o mejor inyector (DI) parámetros de análisis de constructor, y llamando a new MyClass()intentos de encontrar coincidencias con el tipo de parámetros de constructor cuando se crea una nueva instancia del proveedor, que se analiza y se pasa al constructor, por ejemplo
new MyClass(someArg);
ngOnInites un gancho ciclo de vida llamado por Angular2 para indicar que se realiza angular crear el componente. ngOnInitse ngOnInitdenomina el ciclo de vida vinculados a indicar angular crear componentes se ha completado.
Se tienen que importar WE OnIniten la Orden como utilizar el presente (En realidad implementingLearn OnInitno es obligatorio, pero considera una buena práctica): Tenemos que ser importado OnInitcon el fin de utilizar este (de hecho, la aplicación OnInitno es obligatoria, pero se considera una buena práctica):
import {Component, OnInit} from '@angular/core';
para su uso en el método, de la entonces OnInitNOSOTROS tenemos que poner en práctica. La clase en al igual que el este y después de usar OnInitel método, hay que lograr en esta clase.
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
Implementar esta interfaz para ejecutar la lógica de inicialización personalizada después de propiedades enlazados a datos de su directiva se han inicializado. Propiedad de enlace de datos después del comando de inicialización, implementa esta interfaz para realizar la inicialización lógica personalizada. Después de que se llama el derecho ngOnInit apos propiedades de datos directiva han han sido con destino a la marcada primera vez, y antes de que cualquiera de los comprobarse SUS niños han han sido. NgOnInit propiedades después de la primera instrucción de comprobación de los datos y vinculante inmediatamente antes de comprobar sus hijos llamar. Se invoca sólo una vez cuando la directiva se crea una instancia. Después de las instrucciones de instancias, llamadas sólo una vez.
Utilizamos Medio ngOnInitpara la inicialización en el All / declaración y cosas que se deben evitar trabajar en el constructor en. En general, vamos a ngOnInitser utilizado para toda la inicialización / declaración, y para evitar el trabajo en el constructor. El constructor sólo se debe utilizar para inicializar miembros de la clase, pero no debe hacer "trabajo" real. El constructor sólo se debe utilizar para inicializar miembros de la clase y no se debe hacer el verdadero "trabajo".
En caso de utilizar SO constructor()a Configuración de la inyección de dependencias y no mucho la cosa. Por lo tanto, se debe utilizar constructor()para la inyección de dependencias conjunto, sin ajustes indebidos. ngOnInit () es Better Place a "Inicio" - apos DONDE / Componentes Cuando 'se resuelven Enlaces. ngOnInit () es la posición de 'arranque' mejor - el análisis de posición / posiciones de unión de componentes.
Para obtener más información, consulte aquí: Para más información, ver aquí:
https://angular.io/api/core/OnInit https://angular.io/api/core/OnInit
2 el componente Vs de la OnInit el Constructor el angular el angular de montaje 2 y constructores OnInit
Casa # 3
Corto y simple respuesta sería, simple y fácil respuesta es que
Constructor: constructorIS A default methodlas carreras ( por deafult ) Cuando se construye de componentes. Constructor: constructorA default methodrun ( la deafult) cuando el conjunto está construido. El crear el cuando an instancede la clase A que el tiempo también constructor(default method)sería llamado. Crear una clase an instance, la llamada será constructor(default method). Es decir, en SO, SE del cuando el componente constructed or/and an instance is created constructor(default method)es llamado y llamado código correspondiente escrito el interior es. Así, en otras palabras, el constructed or/and an instance is created constructor(default method)componente constructed or/and an instance is created constructor(default method)llamará al constructed or/and an instance is created constructor(default method)código en cuestión y llamar a uno escrito. Básicamente y en general en Angular2TI utiliza para inyectar cosas como servicescuando el componente se está construyendo la mayor para su uso. Básicamente, típicamente Angular2por inyección, cuando el conjunto está configurado para su uso posterior, por lo general se utiliza para servicesalgo.
OnInit: ES NgOnInit del gancho del Ciclo de Vida primer componente que se ejecuta la Después de constructor(default method)la al inicializar el componente. OnInit: NgOnInit es el ciclo de vida de los componentes vinculados a al componente de inicialización, es la primera constructor(default method)ejecución después.
Por lo tanto, su constructor será llamado primero y OnInit se llamará más tarde después de método constructor. Por lo tanto, la primera llamada al constructor, a continuación, llamar OnInit después de que el método constructor.
boot.ts programa de arranque
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 recursos: Gancho LifeCycle
¿Puede el Compruebe el este por Usted pequeña demostración que muestra la aplicación de ambas-Things. Se puede ver esta muestra de demostración de lo que demuestra la realización de ambos.
# 4 piso
Creo que el mejor ejemplo sería el uso de servicios. Creo que el mejor ejemplo es el uso del servicio. Digamos que quiero agarrar los datos de mi servidor cuando mi componente se pone 'activado'. Datos adquiere del servidor se supone que ha de ser "activa" en mi montaje. Digamos que también quiero hacer algunas cosas adicionales a los datos después de recibir desde el servidor, tal vez me da un error y desea iniciar sesión de manera diferente. Digamos que quiero después de la obtención de datos desde el servidor a los datos para hacer algunas otras cosas tal vez me encontré con un error y quiero dejar constancia de una manera diferente.
Es muy fácil con ngOnInit más de un constructor, también limita el número de capas de devolución de llamada tengo que añadir a mi solicitud. Uso ngOnInit muy fácil en el constructor, sino que también limita el número de capas tengo que añadir a la solicitud de devolución de llamada .
Por ejemplo: 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 de tan sólo pudiera llamar a mi _userService y poblar mi lista_usuarios, pero tal vez desee hacer algunas cosas adicionales con ella. Yo uso mi constructor, que sólo puedo llamar _userService y lista_usuarios lleno, pero tal vez desee utilizarlo para hacer algunas algo extra. Al igual que asegurarse de que todo es upper_case, yo estoy totalmente seguro de cómo mis datos está llegando a través. Sólo asegúrese de que todo es el mismo capital, no estoy del todo seguro de cómo se transmite mis datos.
Por lo que hace que sea mucho más fácil de usar ngOnInit. Por lo tanto, hace que sea más fácil de 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();
};
}
Esto hace que sea mucho más fácil de ver, y por lo que acaba de llamar a mi función dentro de mi componente cuando inicializar en lugar de tener que buscar en otro sitio. Se hace que la visualización mucho más fácil, así que llamar a una función en una asamblea en la inicialización, sin tener que excavar en otro lugar. Realmente es sólo otra herramienta que puede utilizar para hacer más fácil la lectura y el uso en el futuro. De hecho, es justo que se puede utilizar otra herramienta para hacer más fácil la lectura y el uso en el futuro. También me parece muy mala práctica de las llamadas a funciones de venta dentro de un constructor! Además, he encontrado la llamada de función en el constructor es una mala idea!
Casa # 5
La primera de ellas (constructor) está relacionada con la creación de instancias de clases y no tiene nada que ver con Angular2. El primero (constructor) y la clase asociada con la instancia se Angular2 independiente. Me refiero a un constructor se puede utilizar en cualquier clase. Es decir, el constructor puede ser utilizado en cualquier clase. Se puede poner en ella algún proceso de inicialización para la instancia recién creada. Puede hacer algo de procesamiento inicial de la instancia recién creada.
Los segundos una corresponde a un gancho de ciclo de vida de los componentes Angular2: El segundo componente corresponde a la del ciclo de vida Angular2 gancho:
Tomado de la página web del angular oficial: referencias de la web oficial Angular:
ngOnChangesse llama cuando un enlace de entrada o de salida valor cambia cuando serán llamados una entrada o valor cambia con destino de salida,ngOnChangesngOnInitSe llama después de la primerangOnChangesngOnInitfue después de la primera llamadangOnChanges
¿Debe utilizar SO ngOnInitSI EN confía proceso de inicialización los enlaces del componente (Parámetros de componentes por ejemplo, con definido @Input), de lo contrario El constructor sería suficiente ... Por lo tanto, se debe usar ngOnInitsi el proceso de inicialización depende de los componentes (elementos se utilizan para definir los parámetros atadas por ejemplo, conjunto @Input), de lo contrario la estructura es lo suficientemente ......
Casa # 6
La prueba de la presente los campos A, la que escribió el este código, el endeudamiento de por la NativeScript el Tutorial : Para probar esto, escribí el siguiente código dibuja NativeScript tutorial :
user.ts nombre de usuario
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 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 la consola salida de la consola
JS: *** User class constructor property ***
JS: *** User class constructor constructor ***
JS: *** Login Component Constructor ***
JS: *** User class constructor ngOnInit ***
JS: *** Login Component ngOnInit ***
