ngoninit constructor angular
Diferencia entre Constructor y ngOnInit (22)
Angular proporciona el enganche del ciclo de vida
ngOnInit
de forma predeterminada.
¿Por qué debería
ngOnInit
, si ya tenemos un
constructor
?
Encontré la respuesta y traté de traducirla al inglés: esta pregunta aún surgió, incluso en entrevistas técnicas. De hecho, hay un gran parecido entre los dos, pero también hay algunas diferencias.
-
El constructor es parte de ECMAScript. Por otro lado, ngOnInit () es una noción de angular.
-
Podemos llamar a los constructores en todas las clases incluso si no usamos Angular
-
LifeCycle: se llama al constructor antes que ngOnInt ()
-
En el constructor no podemos llamar elementos HTML. Sin embargo, en ngOnInit () podemos.
-
Generalmente, llamadas de servicios en ngOnInit () y no en el constructor
¡El constructor es el primero, y sucede a veces cuando los datos de @input son nulos! entonces usamos Constructor para declarar servicios y ngOnInit sucede después. Ejemplo para contrutor:
constructor(translate: TranslateService, private oauthService: OAuthService) {
translate.setDefaultLang(''En'');
translate.use(''En'');}
Ejemplo para onInit:
ngOnInit() {
this.items = [
{ label: ''A'', icon: ''fa fa-home'', routerLink: [''/''] },
{ label: ''B'', icon: ''fa fa-home'', routerLink: [''/''] }]
}
Creo que onInit es como InitialComponents () en winForm.
Al igual que muchos otros idiomas, puede inicializar variables a nivel de clase, el constructor o un método. Depende del desarrollador decidir qué es lo mejor en su caso particular. Pero a continuación hay una lista de las mejores prácticas a la hora de decidir.
Variables de nivel de clase
Por lo general, declarará aquí todas sus variables que se utilizarán en el resto de su componente. Puede inicializarlos si el valor no depende de otra cosa, o usar la palabra clave const para crear constantes si no cambian.
export class TestClass{
let varA: string = "hello";
}
Constructor
Normalmente, es una buena práctica no hacer nada en el constructor y simplemente usarlo para las clases que se inyectarán. La mayoría de las veces su constructor debería verse así:
constructor(private http: Http, private customService: CustomService) {}
esto creará automáticamente las variables de nivel de clase, por lo que tendrá acceso a
customService.myMethod()
sin tener que hacerlo manualmente.
NgOnInit
NgOnit es un enlace de ciclo de vida proporcionado por el marco Angular 2.
Su componente debe implementar
OnInit
para poder usarlo.
Este enlace de ciclo de vida se llama después de que se llama al constructor y se inicializan todas las variables.
La mayor parte de su inicialización debería ir aquí.
Tendrá la certeza de que Angular ha inicializado su componente correctamente y puede comenzar a hacer cualquier lógica que necesite en
OnInit
en
OnInit
hacer cosas cuando su componente no haya terminado de cargarse correctamente.
Aquí hay una imagen que detalla el orden de lo que se llama:
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
TLDR
Si está utilizando el marco Angular 2 y necesita interactuar con ciertos eventos del ciclo de vida, utilice los métodos proporcionados por el marco para evitar problemas.
Ambos métodos tienen diferentes objetivos / responsabilidades. La tarea del constructor (que es una característica compatible con el lenguaje) es asegurarse de que la representación sea invariable. De lo contrario, se asegurará de que la instancia sea válida al proporcionar los valores correctos a los miembros. Depende del desarrollador decidir qué significa "correcto".
La tarea del método onInit () (que es un concepto angular) es permitir invocaciones de método en un objeto correcto (representación invariable). Cada método debe a su vez asegurarse de que la representación invariable se mantenga cuando el método finalice.
El constructor debe usarse para crear objetos ''correctos'', el método onInit le brinda la oportunidad de invocar llamadas a métodos en una instancia bien definida.
Creo que el mejor ejemplo sería usar servicios. Digamos que quiero obtener datos de mi servidor cuando mi componente se ''Activa''. Digamos que también quiero hacer algunas cosas adicionales a los datos después de obtenerlos del servidor, tal vez obtengo un error y quiero registrarlo de manera diferente.
Es realmente fácil con ngOnInit sobre un constructor, también limita la cantidad de capas de devolución de llamada que 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 user_list, pero tal vez quiera hacer algunas cosas adicionales con él. Como asegurarse de que todo esté en mayúsculas, no estoy completamente seguro de cómo se transmiten 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, por lo que solo llamo a mi función dentro de mi componente cuando inicializo en lugar de tener que buscarlo en otro lugar. Realmente es solo otra herramienta que puede usar para facilitar su lectura y uso en el futuro. ¡También me parece una muy mala práctica poner llamadas a funciones dentro de un constructor!
Dos cosas para observar aquí:
- Se llama al constructor cada vez que se crea un objeto de esa clase.
- Se llama a ngOnInit una vez que se crea el componente.
Ambos tienen usabilidad diferente.
El
Constructor
es un método predeterminado de la clase que se ejecuta cuando se instancia la clase y garantiza la inicialización adecuada de los campos en la clase y sus subclases.
El Inyector de dependencia (DI) angular o mejor analiza los parámetros del constructor y cuando crea una nueva instancia al llamar a
new MyClass()
intenta 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
ngOnInit
ciclo de vida llamado por Angular2 para indicar que Angular ha terminado de crear el componente.
Tenemos que importar
OnInit
para usarlo de esta manera (en realidad, implementar
OnInit
no es obligatorio pero se considera una buena práctica):
import {Component, OnInit} from ''@angular/core'';
luego, para usar el método de
OnInit
, tenemos que implementarlo en una clase como esta.
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 enlazadas a datos de su directiva. ngOnInit se llama justo después de que las propiedades vinculadas a datos de la directiva se hayan verificado por primera vez y antes de que se haya verificado cualquiera de sus elementos secundarios. Se invoca solo una vez cuando se instancia la directiva.
Principalmente usamos
ngOnInit
para toda la inicialización / declaración y evitamos que las cosas funcionen en el constructor.
El constructor solo debe usarse para inicializar miembros de clase, pero no debe hacer "trabajo" real.
Por lo tanto, debe usar
constructor()
para configurar la Inyección de dependencias y no mucho más.
ngOnInit () es un mejor lugar para "comenzar": es donde / cuando se resuelven los enlaces de los componentes.
Para más información consulte aquí:
-
Constructor angular de 2 componentes contra OnInit
El constructor es un método en JavaScript y se considera como una característica de la clase en es6. Cuando se crea una instancia de la clase, inmediatamente ejecuta el constructor, ya sea que se use en el marco angular o no. Por lo tanto, el motor de JavaScript lo llama y Angular no tiene control sobre eso.
import {Component} from ''@angular/core'';
@Component({})
class CONSTRUCTORTEST {
//This is called by Javascript not the Angular.
constructor(){
console.log("view constructor initialised");
}
}
La clase "ConstructorTest" se instancia a continuación, por lo que internamente llama al constructor (todo esto sucede por JavaScript (es6) no Angular).
new CONSTRUCTORTEST();
Es por eso que hay un enlace de ciclo de vida ngOnInit en Angular.ngOnInit se muestra cuando Angular ha terminado de inicializar el componente.
import {Component} from ''@angular/core'';
@Component({})
class NGONINITTEST implements onInit{
constructor(){}
//ngOnInit calls by Angular
ngOnInit(){
console.log("Testing ngOnInit");
}
}
Primero, instanciamos la clase como se muestra a continuación, que sucede con las ejecuciones inmediatas del método constructor.
let instance = new NGONINITTEST();
Angular llama a ngOnInit cuando es necesario de la siguiente manera:
instance.ngOnInit();
Pero puede preguntar por qué estamos usando constructor en Angular?
La respuesta son las inyecciones de dependencias . Como se mencionó antes, el constructor llama por el motor JavaScript inmediatamente cuando la clase se instancia (antes de llamar a ngOnInit por Angular), por lo que mecanografiado nos ayuda a obtener el tipo de dependencias que se definen en el constructor y finalmente dice Angular qué tipo de dependencias queremos usar en ese componente específico.
El artículo La diferencia esencial entre Constructor y ngOnInit en Angular explora la diferencia desde múltiples perspectivas. Esta respuesta proporciona la explicación de diferencia más importante relacionada con el proceso de inicialización de componentes, que también muestra la diferencia en el uso.
El proceso de arranque angular consta de dos etapas principales:
- construyendo árbol de componentes
- detección de cambios en ejecución
Se llama al constructor del componente cuando Angular construye el árbol de componentes. Todos los ganchos de ciclo de vida se llaman como parte de la detección de cambios en ejecución.
Cuando Angular construye el árbol de componentes, el inyector del módulo raíz ya está configurado para que pueda inyectar cualquier dependencia global. Además, cuando Angular crea una instancia de una clase de componente secundario, el inyector para el componente primario también ya está configurado para que pueda inyectar proveedores definidos en el componente primario, incluido el componente primario en sí. Los constructores de componentes es el único método que se llama en el contexto del inyector, por lo que si necesita alguna dependencia, ese es el único lugar para obtener esas dependencias.
Cuando Angular inicia la detección de cambios, se construye el árbol de componentes y se llama a los constructores de todos los componentes del árbol.
Además, los nodos de plantilla de cada componente se agregan al DOM.
El mecanismo de comunicación
@Input
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 de
ngOnInit
.
Veamos un ejemplo rápido. Supongamos que tiene la siguiente plantilla:
<my-app>
<child-comp [i]=''prop''>
Entonces Angular comienza a iniciar la aplicación.
Como dije, primero crea clases para cada componente.
Entonces llama
MyAppComponent
constructor
MyAppComponent
.
También crea un nodo DOM que es el elemento host del componente
my-app
.
Luego se procede a crear un elemento host para el
child-comp
y llamar
ChildComponent
constructor
ChildComponent
.
En esta etapa, no está realmente preocupado por el enlace de entrada
i
y los ganchos 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 ejecuta la detección de cambios y actualiza los enlaces para
my-app
y llama a
ngOnInit
en la clase MyAppComponent.
Luego procede a actualizar los enlaces para la
ngOnInit
y llama a
ngOnInit
en la clase ChildComponent.
Puede hacer su lógica de inicialización en constructor o
ngOnInit
dependiendo de lo que necesite disponible.
Por ejemplo, el artículo
Aquí es cómo obtener ViewContainerRef antes de que se evalúe la consulta @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:
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 incluir un 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:
- Se llama a
ngOnChangescuando cambia un valor de enlace de entrada o salidangOnInitse llama después de los primerosngOnChanges
Por lo tanto, debe usar
ngOnInit
si el proceso de inicialización se basa en enlaces del componente (por ejemplo, los parámetros del componente definidos con
@Input
), de lo contrario, el constructor sería suficiente ...
En los ciclos de vida angulares
1) El inyector angular detecta los parámetros del constructor y crea una clase de instancia.
2) Siguiente ciclo de vida de la llamada angular
Ganchos de ciclo de vida angular
ngOnChanges -> Llamada en la directiva de enlace de parámetros.
ngOnInit -> Iniciar renderizado angular ...
Llame a otro método con estado de ciclo de vida angular.
La principal diferencia entre el constructor y
ngOnInit
es que
ngOnInit
es un
ngOnInit
ciclo de vida
y se ejecuta después del constructor.
La plantilla interpolada de componentes y los valores iniciales de entrada no están disponibles en el constructor, pero están disponibles en
ngOnInit
.
La diferencia práctica es cómo
ngOnInit
afecta la estructura del código.
La mayoría del código de inicialización se puede mover a
ngOnInit
,
siempre que esto no cree condiciones de carrera
.
Constructor antipatrón
Una cantidad sustancial de código de inicialización hace que el método del constructor sea difícil de extender, leer y probar.
Una receta habitual para separar la lógica de inicialización del constructor de clases es moverla a otro método como
init
:
class Some {
constructor() {
this.init();
}
init() {...}
}
ngOnInit
puede cumplir este propósito en componentes y directivas:
constructor(
public foo: Foo,
/* verbose list of dependencies */
) {
// time-sensitive initialization code
this.bar = foo.getBar();
}
ngOnInit() {
// rest of initialization code
}
Inyección de dependencia
La función principal de los constructores de clases en Angular es la inyección de dependencia. Los constructores también se utilizan para la anotación DI en TypeScript. Casi todas las dependencias se asignan como propiedades a la instancia de clase.
El constructor promedio de componentes / directivas ya es lo suficientemente grande porque puede tener una firma multilínea debido a dependencias, por lo que poner una lógica de inicialización innecesaria en el cuerpo del constructor contribuye al antipatrón.
Inicialización asincrónica
El constructor de inicialización asincrónica a menudo se puede considerar antipatrón y tiene olor porque la instanciación de clase termina antes que la rutina asincrónica, y esto puede crear condiciones de carrera.
Si no es el caso,
ngOnInit
y otros
ngOnInit
ciclo de vida son mejores lugares para esto, particularmente porque pueden beneficiarse de la sintaxis
async
:
constructor(
public foo: Foo,
public errorHandler: ErrorHandler
) {}
async ngOnInit() {
try {
await this.foo.getBar();
await this.foo.getBazThatDependsOnBar();
} catch (err) {
this.errorHandler.handleError(err);
}
}
Si hay condiciones de carrera (incluida la que un componente no debería aparecer en el error de inicialización), la rutina de inicialización asincrónica debe tener lugar antes de la creación de instancias del componente y trasladarse al componente principal, la protección del enrutador, etc.
Examen de la unidad
ngOnInit
es más flexible que un constructor y proporciona algunos beneficios para las pruebas unitarias que se explican en detalle en
esta respuesta
.
Teniendo en cuenta que
ngOnInit
no se llama automáticamente en la compilación de componentes en las pruebas unitarias, los métodos que se llaman en
ngOnInit
se pueden espiar o burlar después de la
ngOnInit
instancias de componentes.
En casos excepcionales,
ngOnInit
puede
ngOnInit
por completo para proporcionar aislamiento a otras unidades componentes (por ejemplo, alguna lógica de plantilla).
Herencia
Las clases secundarias solo pueden aumentar los constructores, no reemplazarlos.
Como
this
no se puede referir antes de
super()
, esto pone restricciones a la precedencia de inicialización.
Teniendo en cuenta que la directiva o componente angular usa
ngOnInit
para la lógica de inicialización insensible al tiempo, las clases secundarias pueden elegir si se llama a
super.ngOnInit()
y cuándo:
ngOnInit() {
this.someMethod();
super.ngOnInit();
}
Esto sería imposible de implementar solo con el constructor.
Las respuestas anteriores realmente no responden 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) Digamos que tu componente es un humano. Los humanos tienen vidas que incluyen muchas etapas de la vida, y luego caducamos.
2) Nuestro componente humano podría tener el siguiente script de ciclo de vida: nacido, bebé, escuela primaria, adulto joven, adulto de mediana edad, adulto mayor, muerto, desechado.
3) Digamos que quieres tener una función para crear hijos. Para evitar que esto se complique, y sea bastante humorístico, desea que su función solo se llame durante la etapa de adulto joven de la vida del componente humano. Por lo tanto, desarrolla un componente que solo está activo cuando el componente principal está en la etapa Adulto joven. Los ganchos lo ayudan a hacerlo señalando esa etapa de la vida y dejando que su componente actúe sobre ella.
Cosas divertidas. Si dejas volar tu imaginación para codificar algo como esto, se vuelve complicado y divertido.
Para probar esto, escribí este código, tomando prestado del Tutorial NativeScript :
user.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 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 ***
Se llama al
constructor
cuando Angular "instancia / construye" el componente.
El método
ngOnInit
es un
ngOnInit
que representa la parte de inicialización del ciclo de vida del componente.
Una buena práctica es usarlo solo para
inyección de servicio
:
constructor(private
service1: Service1,
service2: Service2
){};
Incluso si es posible, no debe hacer un "trabajo" en el interior.
Si desea iniciar alguna acción que tiene que ocurrir en la "inicialización" del componente, use
ngOnInit
:
ngOnInit(){
service1.someWork();
};
Además, las acciones que involucran
propiedades de entrada
, provenientes de un componente padre, no pueden realizarse en el constructor.
Deben colocarse en el método
ngOnInit
u otro gancho.
Es lo mismo para el elemento relacionado con la vista (DOM), por ejemplo,
elementos viewchild
:
@Input itemFromParent: string;
@ViewChild(''childView'') childView;
constructor(){
console.log(itemFromParent); // KO
// childView is undefined here
};
ngOnInit(){
console.log(itemFromParent); // OK
// childView is undefined here, you can manipulate here
};
Solo agregaré una cosa importante que se omitió en las explicaciones anteriores y explica cuándo
DEBE
usar
ngOnInit
.
Si está manipulando el DOM del componente mediante, por ejemplo, ViewChildren , ContentChildren o ElementRef , sus elementos nativos no estarán disponibles durante la fase de construcción.
Sin embargo, dado que
ngOnInit
ocurre una vez que se ha creado el componente y se han llamado las comprobaciones (
ngOnChanges
), puede acceder al DOM en este punto.
export class App implements OnInit, AfterViewInit, AfterContentInit {
@Input() myInput: string;
@ViewChild() myTemplate: TemplateRef<any>;
@ContentChild(ChildComponent) myComponent: ChildComponent;
constructor(private elementRef: ElementRef) {
// this.elementRef.nativeElement is undefined here
// this.myInput is undefined here
// this.myTemplate is undefined here
// this.myComponent is undefine here
}
ngOnInit() {
// this.elementRef.nativeElement can be used from here on
// value of this.myInput is passed from parent scope
// this.myTemplate and this.myComponent are still undefined
}
ngAfterContentInit() {
// this.myComponent now gets projected in and can be accessed
// this.myTemplate is still undefined
}
ngAfterViewInit() {
// this.myTemplate can be used now as well
}
}
constructor()
se usa para hacer la inyección de dependencia.
ngOnInit()
,
ngOnChanges()
y
ngOnDestroy()
etc. son métodos de ciclo de vida.
ngOnChanges()
será el primero en ser llamado, antes
ngOnInit()
, cuando cambie el valor de una propiedad vinculada, NO se llamará si no hay cambio.
ngOnDestroy()
se llama cuando se elimina el componente.
Para usarlo,
OnDestroy
debe ser
implement
editado por la clase.
La respuesta corta y simple sería,
Constructor
: el
constructor
es un
default method
ejecuta (
por defecto
) cuando se construye el componente.
Cuando crea
an instance
de una clase, ese tiempo también se llamaría
constructor(default method)
.
En otras palabras, cuando se está
constructed or/and an instance is created constructor(default method)
componente
constructed or/and an instance is created constructor(default method)
se llama al 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 enlace del ciclo de vida del componente que se ejecuta primero después del
constructor(default method)
cuando se inicializa el componente.
Entonces, su constructor se llamará primero y Oninit se llamará más tarde después del método del 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
Puede consultar esta pequeña demostración que muestra la implementación de ambas cosas.
Constructor es una función ejecutada cuando se construye el componente (u otra clase).
ngOnInit es una función que pertenece a un grupo de métodos de ciclo de vida de componentes y se ejecutan en un momento diferente de nuestro componente (es por eso que se llama ciclo de vida). Aquí hay una lista de todos ellos:
El constructor se ejecutará antes de cualquier función del ciclo de vida.
Constructor: el método del constructor en una clase ES6 (o TypeScript en este caso) es una característica de una clase en sí misma, en lugar de una característica angular. Está fuera del control de Angular cuando se invoca el constructor, lo que significa que no es un enlace adecuado para hacerle saber cuando Angular ha terminado de inicializar el componente. El motor JavaScript llama al constructor, no Angular directamente. Es por eso que se creó el gancho del ciclo de vida ngOnInit (y $ onInit en AngularJS). Teniendo esto en cuenta, hay un escenario adecuado para usar el constructor. Esto es cuando queremos utilizar la inyección de dependencias, esencialmente para "conectar" dependencias en el componente.
Como el constructor es inicializado por el motor de JavaScript, y TypeScript nos permite decirle a Angular qué dependencias necesitamos que se asignen a una propiedad específica.
ngOnInit está ahí para darnos una señal de que Angular ha terminado de inicializar el componente.
Esta fase incluye el primer paso en la Detección de cambios contra las propiedades que podemos unir al componente en sí, como usar un decorador @Input ().
Debido a esto, las propiedades @Input () están disponibles dentro de ngOnInit, sin embargo, no están definidas dentro del constructor, por diseño
OK,
antes que nada
ngOnInit
es parte del
ciclo
de
vida Angular
, mientras que el
constructor
es parte de la clase
ES6
JavaScript, ¡así que la diferencia principal comienza desde aquí! ...
Mire la tabla a continuación que creé que muestra el ciclo de vida de Angular.
En Angular2 + usamos el
constructor
para hacer la
DI(Dependency Injection)
por nosotros, mientras que en Angular 1 sucedía llamando al método String y verificando qué dependencia se inyectó.
Como puede ver en el diagrama anterior,
ngOnInit
ocurre después de que el constructor está listo y
ngOnChnages
y se despide 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 usamos
ngOnInit
y el
constructor
en el siguiente código:
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!'');
}
}
constructor () es el método predeterminado en el ciclo de vida del Componente y se usa para la inyección de dependencia. Constructor es una característica de mecanografiado.
ngOnInit () se llama después del constructor y ngOnInit se llama después de los primeros ngOnChanges.
es decir, Constructor () -> ngOnChanges () -> ngOnInit ()
como se mencionó anteriormente, se llama a ngOnChanges () cuando cambia un valor de enlace de entrada o salida.