Te sugerimos que pruebes esta solución en un ambiente controlado antes de enviarlo a producción, un saludo.
Solución:
-
ngOnChanges()(OnChanges) se llama cuando un valor vinculado a una entrada ha cambiado para que pueda ejecutar un código personalizado cuando una entrada ha cambiado. -
ngDoCheck()(DoCheck) se llama cuando se ejecuta la detección de cambios para que pueda implementar su acción de detección de cambios personalizada.
Estaba jugando con estos dos y encontré algunas cosas interesantes que vale la pena compartir:
ngDoCheck():
Esto se llamará cada vez que se llame a uno de los ganchos de la Zona,
¿Cómo?
Angular2 usa NgZone, que como @Gunter también dijo, ha parcheado todos los eventos asíncronos dentro del navegador, puedes pensar en ello como;
var originalTimeout = window.setTimeout;
window.setTimeout = function(callback,time)
originalTimeout(callback,time);
// notify Angular that a setTimeout is fired
// e.g run ngDoCheck() for components
Así que cada vez que corres setTimeouten realidad estás llamando a la función anterior, que es un mono parchado en el original setTimeout.
Descargo de responsabilidad: El código anterior es completamente abstracto y en Zonejs no lo encontrará, pero solo quería mostrar de alguna manera lo que significa cuando dicen “Zone ha parcheado todas las funciones asíncronas y tiene ganchos en ellas”;
De todos modos, así que cada vez que ejecutas un setTimeout (o cualquier otra función asíncrona), cuando haya terminado, ngDoCheck sera llamado.
Entonces significa que angular solo verifica si ha habido un cambio en el modelo o en alguna de las @inputs o no.
¿Cuándo es útil?
ngDoCheck se vuelve útil si su componente ChangeDetectionStrategy es OnPush, lo que significa que solo actualizará la vista si se ha cambiado alguna de las referencias @Inputs.
En algunos casos, desea usar OnPush pero desea realizar una actualización manual en cada verificación.
Echa un vistazo a este plunker.
Encontrará que incluso si el ChangeDetectionStrategy de El on-push-test el componente es OnPushcuando hacemos clic en mutar comida y eso muta el alimentos lista, ejecutaré la markForCheck dentro de ngDoCheck y actualizar la vista después de un dummy if condición.
¡Entonces esto significa que esta función se llamará MUCHO! así que ten cuidado con lo que estás poniendo dentro.
Así que en resumen:
ngDoCheck : esta función se llamará cada vez que se active un evento en la aplicación que pueda causar un cambio, pero no necesariamente se considera un cambio.
ngOnChanges
Esto solo se llamará si ha habido un cambio de referencia en cualquiera de los enlaces @Inputs, independientemente de la ChangeDetectionStrategy del componente
Así que si mutamos los alimentos array Me gusta esto :
this.foods.push(value: 'steak-3', viewValue: 'Fish');
Él ngOnChanges no será llamado, pero si actualizamos la referencia de esta manera:
this.foods = [value: 'steak-3', viewValue: 'Fish'];
Se llamará.
En primer lugar, felicitaciones por las respuestas anteriores. Estoy agregando un caso de uso para las dos funciones a las que me he enfrentado personalmente.
ngOnChanges() (OnChanges): para detectar cambios en las variables pasadas por valor
ngDoCheck() (DoCheck) : para detectar cambios en la variable pasada por referencia, como arraysque no son detectados por ngOnChanges() ya que el valor antiguo y el valor nuevo tienen la misma referencia