Change Detection En Angular

Creado por @victorsavkin

 

Es el proceso que se encarga de propagar el cambio del estado de la data a la vista.

Demo

El componente hijo cambió el estado de su data y este cambio se replicó en el padre

 

¡Cool!, ¿cierto?

¿Es debido al change detection?

Demo

Esta vez nuestra nueva data "author" no cambió

¡Bug! un error en angular

Nop.

Angular divide el proceso de la propagación de la data en dos fases:

 

 

Modelo => .ts

 

Vista => .html

Modelo

 

De los cambios en el modelo es responsable el desarrollador: con un evento en si mismo o con inputs, outputs, services entre varios modelos.

 

Vista

 

De los cambios en la vista es responsable el Change Detection.

Demo

Más sobre CD

vil robo de la presentación de @PascalPrecht

Más sobre CD

Cada componente tiene su propio change detection.

 

CD es una copia "lógica de la vista y sus datos"

 

Lo que hace es comparar valor actual con valor nuevo  y si cambia, actualiza la vista.

 

La imagén completa

 Algo  causa un cambio en el estado de la data de un componente.

 

Estos cambios son detectados por NgZones una adaptación de Zones, y se dispara el CD.

 

El CD va por cada componente empezando en la raiz comparando valor por valor.

 

Si un valor  cambió, cambia su estado(valor) en la vista

El CD va por cada componente empezando en la raiz comparando valor por valor.

 

 

 

vil robo de la presentación de @PascalPrecht

Pero si posees problemas o quieres mejorar el performance hay otra estrategia llamada OnPush.

 

OnPush  compara únicamente la referencia de cada valor y no va atributo por atributo chequeando si algo cambió.

 

Sólo si la referencia cambia, actualiza la vista.

 

 

 

Posible demo??

 

 

¿Referencia?

 

JavaScript tiene:

 

tipos primitivos  : asignos por valor.

 

objetos: asignados por referencia.

 

POR VALOR

POR REFEERENCIA

vil robo de el articulo de @farm_fresh_js

POR VALOR

POR REFEERENCIA

vil robo de el articulo de @farm_fresh_js

 

Ahora podemos deducir que en el primer DEMO la data se cambió también en el padre gracias a la referencia que fue pasada al hijo a través del @input