es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Por qué se llama ngOnChange dos veces en un componente hijo con solo una variable de entrada?

¿Por qué se llama ngOnChange dos veces en un componente hijo con solo una variable de entrada?

21 Jul, 2023 Programación

Tengo un componente hijo que toma una variable de entrada. El componente hijo utiliza ngOnChanges para que cualquier cambio en la variable de entrada desencadene un cambio.

Todo funciona bien, sin embargo, veo que ngOnChanges se llama dos veces cada vez que se carga el componente padre.

Código de ejemplo:

Componente padre

<div *ngif="(devWidth > 576)">
   <app-child-component [inputparam]="paramValue"></app-child-component>
</div>
<div *ngif="!(devWidth > 576)">
   <app-child-component [inputparam]="paramValue"></app-child-component>
</div>

Componente hijo HTML

<div>
   {{inputParam}}
</div>

Componente hijo TS

@Input() inputParam;

ngOnChanges(changes: SimpleChanges) {
  console.log('ngOnChanges llamado con el valor de cambios:', changes)
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Explicación

    En el código proporcionado, el componente padre tiene dos divs con diferentes condiciones y el componente hijo se está utilizando dentro de cada uno de ellos. El componente hijo toma una variable de entrada y utiliza el ciclo de vida de ngOnChanges para detectar cualquier cambio en la variable de entrada.

    Se observa que ngOnChanges se llama dos veces cada vez que se carga el componente padre. Esto se debe a que el componente hijo se crea dos veces, una vez dentro de cada div, y por lo tanto, ngOnChanges se activa dos veces.

    Para evitar esto, el componente hijo se puede crear solo una vez y mover fuera de los dos divs. Luego, se puede agregar la condición dentro del template del componente hijo para mostrar u ocultar el contenido según el valor de devWidth.

    Código modificado:

    Componente Padre

      <app-componente-hijo [inputparam]="paramValue" [devwidth]="devWidth"></app-componente-hijo>

    Componente Hijo HTML

      <div *ngif="(devWidth > 576)">
     {{inputParam}}
  </div>
  <div *ngif="!(devWidth > 576)">
     {{inputParam}}
  </div>

    Componente Hijo TS

      @Input() inputParam;
  @Input() devWidth;

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges llamado con valor de cambios:', changes)
}

    En el código modificado, el componente padre pasa devWidth como una variable de entrada al componente hijo. El componente hijo utiliza la directiva *ngIf para mostrar condicionalmente el contenido según el valor de devWidth. Por lo tanto, el componente hijo se crea solo una vez y ngOnChanges se activa solo una vez.

Comments are closed.