Saltar al contenido

ngOnChanges no se activa si un @Input está recibiendo un objeto

Investigamos por todo el mundo online para traerte la respuesta a tu inquietud, si tienes alguna duda déjanos tu duda y te respondemos sin falta.

Solución:

El enlace del ciclo de vida OnChanges se activa cuando el @Input cambios en el valor de la propiedad. En el caso de un objeto, ese valor es el referencia de objeto. Si la referencia del objeto no cambia, OnChanges no se activa.

Una posible técnica para forzar la detección de cambios es establecer una nueva referencia de objeto después de modificar los valores de propiedad:

this.whatever.value1 = 2;
this.whatever.value2 = 3;
this.whatever = Object.assign(, this.whatever);

los ngOnChanges El controlador de eventos se puede usar para monitorear los cambios:

ngOnChanges(changes: SimpleChanges) 
  for (let propName in changes) 
    let chng = changes[propName];
    let cur = JSON.stringify(chng.currentValue);
    console.log(propName, cur);
  

Como alternativa, si @Input decora una propiedad getter/setter, los cambios se pueden monitorear en el setter:

private _param: Object;

@Input() get param(): Object 
  return this._param;
 
set param(value: Object) 
  console.log("setter", value);
  this._param = value;

Vea este stackblitz para una demostración.

La detección de cambios angulares se activa cuando cambia el valor de la propiedad @Input.

Entonces, para activar la detección de cambios en el caso de un objeto, podría pasar una copia del objeto usando el operador de propagación como entrada.

por ej. someVar = key: value esto es @Input() variable, así que pasa como


...VARIABLE <- aquí está la magia

si el operador de propagación no funciona, use cualquier método de copia profunda de objetos como

JSON.parse(JSON.stringify(obj))

Reseñas y puntuaciones del tutorial

Si te sientes suscitado, eres capaz de dejar un tutorial acerca de qué te ha impresionado de este enunciado.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *