¿Por qué se llama ngOnChange dos veces en un componente hijo con solo una variable de entrada?
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)
}
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
Componente Hijo HTML
Componente Hijo TS
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 dedevWidth
. Por lo tanto, el componente hijo se crea solo una vez yngOnChanges
se activa solo una vez.