Hooks Angular

Lifecycle Hooks

Los Lifecycle Hooks son un conjunto de métodos predefinidos de Angular que se activan en un momento concreto del ciclo de vida de un componente. Estos Hooks pueden crear propiedades,detectar cambios de propiedades, etc...

OnChanges

El método OnChanges detecta cambios en las propiedades del componente. Es necesario importar las interfaces OnChanges y SimpleChanges ( SimpleChanges especifica el cambio producido ) e implementar OnChanges a la clase del componente. Esta interface exige  implementar el método ngOnChanges que es el método encargado de realizar acciones al detectar un cambio. OnChanges solo detecta las propiedades aplicadas con el decorador @Input, es decir, es necesaria la comunicación entre componentes padre e hijo.

Hijo

componente ts

  1. import { Component,Input,Output,EventEmitter, OnChanges, SimpleChanges } from "@angular/core";
  2. @Component({
  3. selector: "prueba",
  4. templateUrl: "prueba.component.html",
  5. styleUrls: ["prueba.component.css"]
  6. })
  7. export class PruebaComponent implements OnChanges{
  8. @Input() public nombre:string;
  9. constructor(){ }
  10. ngOnChanges(changes: SimpleChanges){
  11. console.log(changes);
  12. }
  13. }

componente html

  1. <h2>{{ nombre }}</h2>

Padre

componente ts

  1. import { Component } from "@angular/core";
  2. @Component({
  3. selector: "pruebaPadre",
  4. templateUrl: "pruebaPadre.component.html",
  5. styleUrls: ["pruebaPadre.component.css"]
  6. })
  7. export class PruebaPadreComponent {
  8. public titulo:string;
  9. public nuevoNombre:string;
  10. constructor(){
  11. this.titulo = "Esta es la tienda";
  12. }
  13. }

componente html

  1. <h1>{{ titulo }}</h1>
  2. Nombre a cambiar:
  3. <input type="text" [(ngModel)] = "nuevoNombre">
  4. <p>
  5. Resultado: {{ nuevoNombre }}
  6. </p>

OnInit

El método OnInit se ejecuta a continuación del constructor al cargar una directiva de un componente. Es necesario importar la interface OnInit e implementarla a su clase. La implementación requiere del método ngOnInit, que a diferencia del anterior se ejecuta solo una vez al cargar el componente.

  1. import { Component,Input,Output,EventEmitter, OnChanges, SimpleChanges, OnInit } from "@angular/core";
  2. @Component({
  3. selector: "prueba",
  4. templateUrl: "prueba.component.html",
  5. styleUrls: ["prueba.component.css"]
  6. })
  7. export class PruebaComponent implements OnChanges, OnInit{
  8. @Input() public nombre:string;
  9. constructor(){ }
  10. ngOnChanges(changes: SimpleChanges){
  11. console.log(changes);
  12. }
  13. ngOnInit(){
  14. console.log("Método OnInit");
  15. }
  16. }

DoCheck

El método DoCheck se ejecuta cuando hay algún cambio en el componente, ya sea un evento, pérdida de foco,etc... Es necesario importar la interface DoCheck e implementarla a su clase. Esta implementación exige añadir el método DoCheck y el orden de ejecución sucede a continuación del método ngOnInit. A diferencia de otros métodos DoCheck detecta los cambios en otros componentes, por ejemplo, es posible implementar DoCheck en el app.component (componente principal por defecto) y detectará los cambios antes que el DoCheck del propio componente.

  1. import { Component,DoCheck } from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. templateUrl: './app.component.html',
  5. styleUrls: ['./app.component.css']
  6. })
  7. export class AppComponent implements DoCheck {
  8. title = 'Curso de Angular4 avanzado';
  9. ngDoCheck(){
  10. console.log("El docheck desde app");
  11. }
  12. }

OnDestroy

El método OnDestroy detecta la eliminación de un componente. Es necesario importar la interface OnDestroy e implementarla a su clase. La implementación de la interface obliga a añadir los métodos y en este caso su método es ngOnDestroy, el cual, se ejecuta justo antes de eliminar el componente.

  1. import { Component,Input,Output,EventEmitter, OnChanges, SimpleChanges, OnInit, OnDestroy } from "@angular/core";
  2. @Component({
  3. selector: "prueba",
  4. templateUrl: "prueba.component.html",
  5. styleUrls: ["prueba.component.css"]
  6. })
  7. export class PruebaComponent implements OnChanges, OnInit, OnDestroy{
  8. @Input() public nombre:string;
  9. constructor(){ }
  10. ngOnChanges(changes: SimpleChanges){
  11. console.log(changes);
  12. }
  13. ngOnInit(){
  14. console.log("Método OnInit");
  15. }
  16. ngOnDestroy(){
  17. console.log("destroy");
  18. }
  19. }


Comentarios: 0

Para poder comentar es necesario iniciar sesión



Este dominio utiliza cookies de terceros para crear estadísticas y publicidad personalizada. Si continúa navegando está aceptando su uso