Cómo funciona la detección de cambios
Comprender el ciclo de detección de cambios de Angular
Cómo funciona la detección de cambios es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué es la detección de cambios?
La detección de cambios es el proceso que Angular utiliza para mantener el DOM sincronizado con el estado del componente. Cuando los datos cambian, Angular vuelve a evaluar los enlaces y actualiza solo lo que difiere.
El ciclo de detección
Angular recorre el árbol de componentes desde la raíz hacia abajo y comprueba los enlaces de cada componente. Este recorrido descendente es un ciclo de detección de cambios (tick).
¿Qué activa un tick?
De forma predeterminada, Angular ejecuta la detección de cambios después de eventos asíncronos: eventos del DOM, temporizadores y respuestas HTTP. Esto se coordina mediante Zone.js.
Zone.js
Zone.js aplica monkey patching a las API asíncronas (setTimeout, addEventListener, Promise, XHR) para que Angular sepa cuándo termina una de ellas y puede ser necesario ejecutar un tick.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone envuelve Zone.js para Angular. Puede ejecutar código fuera de la zona de Angular para evitar activar la detección de cambios en bucles intensivos.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});Volver a entrar en la zona
Para actualizar la interfaz desde fuera de la zona, vuelva a entrar en ella con run para que Angular programe un tick.
this.zone.run(() => {
this.ready = true;
});Estrategia predeterminada
Con la estrategia predeterminada, cada componente se comprueba en cada tick. Es sencillo y seguro, pero puede resultar ineficiente en árboles grandes.
Comparación de enlaces
Angular compara el valor actual de cada enlace con su valor anterior mediante Object.is. Si no ha cambiado, no se modifica el DOM.
Las expresiones deben ser puras
Las expresiones de plantilla se ejecutan en cada comprobación, por lo que deben ser rápidas y no tener efectos secundarios. Evite llamar directamente a funciones costosas desde las plantillas.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
En modo de desarrollo, Angular ejecuta una segunda pasada de verificación. Si un valor cambia entre ambas pasadas, obtiene ExpressionChangedAfterItHasBeenCheckedError, lo que indica que el estado se modificó durante el renderizado.
Control manual
Inyecte ChangeDetectorRef para controlar la detección: markForCheck(), detectChanges() y detach() ofrecen un control preciso.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();Comprobación rápida
Compruebe su comprensión de la detección de cambios.
Resumen
Ha aprendido que la detección de cambios es un recorrido descendente del árbol que sincroniza el estado con el DOM, activado por eventos asíncronos mediante Zone.js/NgZone, y que compara los enlaces con Object.is. ChangeDetectorRef proporciona control manual.
Preguntas frecuentes
¿La lección «Cómo funciona la detección de cambios» es gratis?
Sí — el texto completo de «Cómo funciona la detección de cambios» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cómo funciona la detección de cambios»?
Comprender el ciclo de detección de cambios de Angular Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Cómo funciona la detección de cambios»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Cómo funciona la detección de cambios
- Detección de cambios con OnPush
- Angular sin zonas
- Optimización de listas y renderizado