Más información sobre la detección de cambio de ángulo
Angular tiene su propia zona, que es nuestra NgZone común. Hay algo llamado ApplicationRef ngZone, código fuente de Angular, que escucha el evento onTurnDone de ngZone. Siempre que ocurre este evento, ejecuta la función, la función realiza la verificación de cambios y el DOM se actualiza. Mire el ejemplo a continuación, en realidad lo es Zone.js.
En Angular, cada componente tiene su propio detector de cambios. Debido a que podemos controlar de forma independiente cuándo y cómo ocurre la verificación de cambios para cada componente, y dado que cada componente tiene su propia verificación de cambios y las aplicaciones Angular contienen un árbol de componentes, lógicamente también tenemos un árbol de detectores de cambios. Este árbol también puede verse como un gráfico dirigido, en el que los datos siempre fluyen de arriba a abajo (flujo de datos unidireccional).
De hecho, cada vista (componente) tiene un estado, que también es un papel muy importante, porque Angular decide si ejecutar o saltar en función de su valor (FirstCheck, ChecksEnabled, Errored, Destoryed) Pasar sucio Detección de valor en la vista y todas sus subvistas. Si ChecksEnabled es falso o la vista está en estado Error o Destruida, la detección de cambios omitirá la vista y sus subvistas.
Esta estrategia predeterminada es la verificación sucia que mencionamos a menudo, que consiste en verificar todos los subcomponentes desde el componente raíz (recorrido en profundidad primero) siempre que haya cambios.
Como detección de cambios predeterminada, Angular debe detectar todos los componentes cada vez, pero será más eficiente si podemos permitir que Angular solo detecte cambios en la aplicación. Generalmente, comenzaremos desde las dos direcciones siguientes para lograr una detección de cambios más eficiente e inteligente.
El uso es el siguiente:
Por referencia, la detección de cambios se puede realizar manualmente. Podemos obtener este objeto mediante inyección de dependencia en el componente:
Este objeto de detección de cambios proporciona los siguientes métodos.
La detección de cambios no se realizará nuevamente a menos que este método se llame manualmente y se utilice this.changeRef.markForCheck() en el programa. Si desea ejecutarlo varias veces, debe ejecutar esta oración varias veces. El proceso de implementación específico es el siguiente:
En primer lugar, su propósito no importa si se usa onPush o no. Solo se usa en la vista actual y sus subvistas. Escenario de aplicación: obviamente hay una actualización de datos y el ángulo necesita realizar la detección de cambios.
En primer lugar, su propósito no tiene nada que ver con si se usa o no onPush. Proviene del árbol de detección de cambios. El detector de cambios del componente ya no realizará la detección de cambios y sus componentes secundarios tampoco realizarán la detección a menos que se llame manualmente al método adjunto().
En primer lugar, su propósito no tiene nada que ver con si se usa o no onPush. Es para que el componente y sus hijos puedan realizar la detección de cambios, pero no si el componente principal del componente actual (verificación sucia).
Cuando la propiedad de entrada del componente principal es observable, además de this.changeRef.markForCheck(), también podemos usar una canalización asincrónica en el componente secundario para la detección de cambios. Cuando se emite un nuevo valor, la canalización asincrónica marcará el componente para verificar si hay cambios (de hecho, también se llama a this.changeRef.markForCheck()).
Comprenda mejor la diferencia entre estos dos métodos a través de un ejemplo:
Análisis de ejemplo:
Si desea comprender realmente la detección de cambios de Angular, asegúrese de escribir de lo contrario, como yo antes, todavía no entiendo después de leer muchas teorías, y es fácil confundir las propiedades de ChangeDetectorRef ~ Espero que puedas ver este artículo con más claridad ~