angular - ngafterviewchecked - ngdocheck example

¿Cuál es la diferencia entre OnChanges y DoCheck en Angular 2?

Question

La diferencia entre ellos me parece muy confusa. ¿Qué diferencia hay entre ellos y cuándo se llaman exactamente?

Answer 1

En primer lugar felicitaciones a las respuestas anteriores. Estoy agregando un caso de uso para las dos funciones que he enfrentado personalmente.

ngOnChanges() (OnChanges) : para detectar cambios en las variables pasadas por valor

ngDoCheck() (DoCheck) : para detectar cambios para variables pasadas por referencia, como arrays , que no son detectadas por ngOnChanges() como el valor antiguo y el nuevo valor tienen la misma referencia

Answer 2

Estaba jugando con estos dos y encontré algunas cosas interesantes que vale la pena compartir:

ngDoCheck() :

Esto será llamado cada vez que se llame a uno de los ganchos de la Zona,

¿Cómo?

Angular2 usa NgZone, que, como también dijo @Gunter, 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
}

Por lo tanto, cada vez que ejecutas setTimeout , en realidad estás llamando a la función anterior, que es un parche del setTimeout original.

Descargo de responsabilidad : el código anterior es completamente abstracto y en Zonejs no lo vas a 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, cada vez que ejecute un setTimeout (o cualquier otra función asíncrona), cuando finalice, se ngDoCheck .

Entonces, significa que Angular solo comprueba si ha habido un cambio en el modelo o en alguna de las @inputs o no.

Cuando esto es útil?

ngDoCheck vuelve útil si ngDoCheck su componente es OnPush, lo que significa que solo actualizará la vista si alguna de las referencias de @Inputs se ha cambiado.

En algunos casos desea utilizar OnPush, pero desea realizar una actualización manual en cada comprobación.

Echa un vistazo a este plunker .

Descubrirá que incluso si la función ChangeDetectionStrategy del ChangeDetectionStrategy on-push-test es OnPush , cuando hacemos clic en mutate food y muta la lista de comidas , ejecutaré markForCheck dentro de ngDoCheck y actualizaré la vista después de un dummy if condición.

Así que esto significa, esta función será llamada MUCHA !!! así que ten cuidado con lo que estás poniendo dentro.

Así que en resumen:

ngDoCheck : esta función se activará cada vez que se ngDoCheck un evento en la aplicación que pueda causar un cambio, pero no necesariamente se considera un cambio.

ngOnChanges

Esto solo y solo será llamado si ha habido un cambio de referencia en cualquiera de los enlaces de @Inputs, independientemente de la ChangeDetectionStrategy del componente.

Así que si mutamos la matriz de alimentos de esta manera:

this.foods.push({value: ''steak-3'', viewValue: ''Fish''});

No se ngOnChanges a ngOnChanges , pero si actualizamos la referencia de esta manera:

this.foods = [{value: ''steak-3'', viewValue: ''Fish''}];

Será llamado.

Answer 3

• ngOnChanges() ( OnChanges ) cuando un valor vinculado a una entrada ha cambiado, por lo que puede ejecutar un código personalizado cuando una entrada ha cambiado.

• ngDoCheck() ( DoCheck ) cuando se ejecuta la detección de cambios para que pueda implementar su acción de detección de cambios personalizada.