Primero, necesitamos un proyecto, así que vamos a crearlo con el siguiente código:
1ng nueva demo
consola
Ahora vamos a crear el componente infantil.
1ng g c child
consola
Ahora estamos listos para implementar el ejemplo. Implementaremos los ganchos de ciclo de vida en ambos componentes y agregaremos un dato al componente infantil.
componente.de.la.aplicación
12345678910111213141516171819202122232425262728293031323334353637383940export classAppComponentimentsOnChanges,OnInit,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy{ parentData:any; data:string;ngOnChanges(changes:SimpleChanges):void{console. log("este es el método onChanges del padre");}ngOnInit():void{console.log("este es el método on init del padre");this.data="Este es el padre";}ngDoCheck():void{console. log("este es el método onDoCheck padre");}ngAfterContentInit():void{console.log("este es el método ngAfterContentInit padre");}ngAfterContentChecked():void{console.log("este es el método ngAfterContentChecked padre");}ngAfterViewInit():void{console. log("este es el método ngAfterViewInit padre");}ngAfterViewChecked():void{console.log("este es el método ngAfterViewChecked padre");}ngOnDestroy():void{console.log("este es el método onDestroy padre");}}ts
El componente de la aplicación funcionará como el componente principal. Así que hemos definido dos variables, una para detectar el cambio y otra para realizar la unión de datos en el componente hijo.
app.component.html
123456789<app-child[parentData]="data"></app-child;<inputtype="text "name="test "placeholder="test"[(ngModel)]="parentData"/{{{{{{{parentData}}}html
En este app.component.html, hemos implementado el componente app-child con la propiedad «databound» y la etiqueta «input» con «two-way data binding», lo que cambiará los datos «parentData».
componente.infantil
123456789101112131415161718192021222324252627282930313233343536373839export classChildComponentimentsOnChanges,OnInit,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy{ @Input() parentData;constructor(){}ngOnChanges(changes:SimpleChanges):void{console. log("este es el método hijo de init");}ngOnInit():void{console.log("este es el método hijo de init");}ngDoCheck():void{console. log("este es el método hijo de OnDoCheck");}ngAfterContentInit():void{console.log("este es el método hijo ngAfterContentInit");}ngAfterContentChecked():void{console.log("este es el método hijo ngAfterContentChecked");}ngAfterViewInit():void{console. log("este es el método ngAfterViewInit hijo");}ngAfterViewChecked():void{console.log("este es el método ngAfterViewChecked hijo");}ngOnDestroy():void{console.log("este es el método onDestroy hijo");}}ts
En este niño.component.ts, implementamos los ganchos del ciclo de vida con un @Input(), que se requiere para la unión de datos.
child.component.html
1Este es el componente infantil
html
En child.component.html, sólo mostramos un mensaje para indicar que se trata de datos de componente infantil.
Ahora estamos listos para ejecutar el proyecto, y la salida se mostrará en la consola. Ejecútelo con el siguiente comando:
1ng serve
consola
Salida
12345678910111213141516171819 este es el padre del método init app.component.ts:22 este es el padre del método onDoCheck app.component.ts:27 este es el padre del método ngAfterContentInit app.component.ts:31 este es el padre del método ngAfterContentChecked app.component.ts:34 este es el hijo del método onChanges hijo. component.ts:15 este es el hijo del método init child.component.ts:18 este es el hijo del método onDoCheck child.component.ts:22 este es el hijo del método ngAfterContentInit child.component.ts:25 este es el hijo del método ngAfterContentChecked child.component.ts:28 este es el hijo del método ngAfterViewInit. component.ts:31 este es el método hijo ngAfterViewChecked child.component.ts:34 este es el método padre ngAfterViewInit app.component.ts:37 este es el método padre ngAfterViewChecked app.component.ts:40 este es el método padre onDoCheck app.component.ts:27 este es el método padre ngAfterContentChecked app. component.ts:34 este es el método hijo onDoChecked child.component.ts:22 este es el método hijo ngAfterContentChecked child.component.ts:28 este es el método hijo ngAfterViewChecked child.component.ts:34 este es el método padre ngAfterViewChecked app.component.ts:40
consola
Aquí notarán algunos comportamientos clave de los métodos de gancho del ciclo de vida.
Como hemos discutido anteriormente, en primer lugar, el método ngOnChanges() actuaría. Pero existe la condición de que debería tener una propiedad de entrada de datos. En nuestro app.component.html, no hay ninguna @Input() presente; por lo tanto, en este caso, se ejecuta directamente después del método ngOnInit(). Después de ngOnInit(), ejecuta el método ngDoCheck() para comprobar los cambios en el componente. Luego inicializa el contenido del componente con la ayuda de ngAfterContentInit(), y luego comprueba si el componente se cargó correctamente en el mismo. Por último, golpea el método ngAfterContentChecked().
Ahora el contenido está cargado, y nuestro componente infantil está listo para golpear sus ganchos del ciclo de vida. Pero hay un cambio entre nuestra aplicación y el componente infantil. En el componente hijo, tenemos el método @Input(), por lo que golpea primero el método ngOnChanges() y obtiene el cambio en la instancia de la interfaz SimpleChanges. Luego pasa por todo el ciclo de vida, como pasamos en el componente de la aplicación.
Después de que todo el contenido se carga con éxito en el componente padre en nuestro caso, es un componente de la aplicación. Es hora de verlos. Pulsa el método ngAfterViewInit() para inicializar la vista del componente, y después de que la vista esté hecha ejecutará el ngAfterViewChecked(). Después de eso, cuando haga cualquier cambio, golpeará el método ngDoCheck() para detectar los cambios, agregar todos los cambios en el DOM, y renderizarlo en la pantalla.
ngOnDestroy() golpea antes de que el componente salga del DOM.