¿Qué es Angular Detección de cambios y estrategias de detección de cambios?

Una de las mayores fortalezas de Angular es su capacidad para detectar y actualizar fácilmente los cambios en una aplicación, al tiempo que representa automáticamente el estado actualizado en la pantalla. Para ayudarle a comprender mejor la exageración en torno a la detección de cambios Angular, cómo funciona la detección de cambios en Angular bibliotecas de componentes y las estrategias que los desarrolladores suelen implementar, proporcionaré algunos ejemplos Angular de detección de cambios y trataré los siguientes temas en este artículo:

Try Ignite UI for Angular

¿Qué es la detección de cambios en Angular?

Angular Detección de cambios es un mecanismo para detectar cuándo cambian los datos en cualquier componente de la aplicación y vuelve a renderizar la vista, por lo que muestra los valores u objetos actualizados a los usuarios finales de inmediato. De esta manera, el marco se asegura de que la interfaz de usuario esté sincronizada con el estado interno del software: el componente y la vista siempre están sincronizados.

Los cambios ocurren en diferentes ocasiones y se derivan de diferentes eventos:

• Datos recibidos de solicitudes de red o eventos de componentes
• Clics del mouse, desplazamiento, mouseover, navegación con el teclado
• AJAX calls
• Uso de funciones de temporizador de JavaScript como setTimeOut, SetInterval

¿Cómo funciona la detección de cambios en Angular?

De forma predeterminada, Angular realiza la detección de cambios en Angular Grid + todos los demás componentes (de arriba a abajo) cada vez que algo desencadena un cambio en su aplicación, ya sea un evento de usuario o datos recibidos de una solicitud de red, como mencioné antes. Para detectar y actualizar el DOM con datos modificados, el marco proporciona su propio detector de cambios para cada componente. El detector de cambios lee el enlace en una plantilla y refleja los datos actualizados en la vista, lo que garantiza que tanto el modelo de datos como el DOM estén sincronizados.

Por ejemplo, es posible que desee actualizar un enlace de componentes que actualiza respectivamente el modelo de datos. El detector de cambios Angular detecta el cambio activado y ejecuta la detección de cambios para comprobar todos los componentes del árbol de componentes de arriba a abajo. De esta manera, verifica si el modelo correspondiente ha cambiado. Y en caso de un nuevo valor, actualiza instantáneamente el DOM.

Imagine que un usuario hace clic en un botón Cambiar dirección al completar un formulario en línea. Esta acción desencadena automáticamente la detección de cambios para cada vista en el árbol de detección de cambios. El detector de cambios Angular recopila todas las vistas que se van a comprobar en busca de cambios y actualiza el valor de la propiedad firstname del usuario que ha solicitado este cambio en primer lugar.

Angular Change Detection Strategies

Como desarrolladores, sabemos que nuestras aplicaciones Angular deben cumplir con varios requisitos para funcionar sin problemas, tener un alto rendimiento y ofrecer una excelente experiencia de usuario. Debemos construirlos para que sean interactivos, receptivos y, sobre todo, actualizados, lo que significa que el estado interno del modelo siempre debe sincronizarse con la vista. Por lo tanto, siempre que queremos optimizar su rendimiento, adoptamos estrategias para la detección de cambios en Angular, que pueden actualizar el DOM cada vez que cambian los datos.

Hay dos estrategias Angular de detección de cambios que proporciona el marco:

• Estrategia predeterminada
• OnPush strategy

Angular Estrategia de detección de cambios predeterminada

Si Angular ChangeDetector está establecido en default, para cualquier cambio en cualquier propiedad del modelo, Angular ejecutará la detección de cambios atravesando un árbol de componentes para actualizar el DOM. Cada componente tiene un detector de cambios que se crea cuando se inicia la aplicación.

La clase ChangeDetectorRef proporciona algunos métodos integrados que podemos usar para manipular el árbol de detección de cambios:

• markForCheck() — marca los componentes tal como se cambiaron, para que se pueda verificar nuevamente para una actualización
• detach() — excluye la vista del árbol de detección de cambios, lo que significa que no se activará ninguna comprobación hasta que la vista se vuelva a adjuntar
• detectChanges() — comprueba la vista y sus componentes secundarios
• checkNoChanges() — comprueba la vista y sus hijos y arrojará un error si se detectan algunos cambios
• reattach() — vuelve a adjuntar una vista que se desvinculó previamente para que se puedan detectar nuevos cambios

Angular OnPush Change Detection Strategy

Si Angular ChangeDetector se establece en onPush, Angular ejecutará el detector de cambios solo cuando se pase una nueva referencia al componente. Si observable se pasa a onPush, se debe llamar manualmente a Angular ChangeDetector para actualizar el DOM.

@Component({
     selector: 'app-card',
     templateUrl: './card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     styleUrls: ['./card.component.scss'] 
     })
     export class CardComponent {
             …
        }
}

Benefits of onPush change detection

No se realizan comprobaciones innecesarias en los componentes secundarios si el elemento padre está actualizando valores que no se pasan como propiedades @Input(), lo que proporciona una representación significativamente más rápida de los componentes.

Uso de la detección de cambios con Ignite UI for Angular

Vamos a crear un ejemplo sencillo que muestre una lista con artículos para comprar usando Ignite UI for Angular. Tengamos un componente de lista de compras y una entrada donde podamos agregar nuevos elementos a la lista.

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
    items = new BehaviorSubject(['Apples', 'Tomatoes', 'Potatoes']);

     constructor() { }

     addNewItem(item) {
            this.items.next([...this.items, item]);
     }   
}

En el app.component.ts declararemos un BehaviorSubject con algunos valores predeterminados y un método que agregará un nuevo elemento a la lista.

<input #newItem type="text" placeholder="Add new item"> 
<button (click)="addNewItem(newItem.value)">Add Item</button> 
<shopping-items [data]="items"></shopping-items> 

Vamos a crear un componente secundario shopping-items que mostrará los artículos usando el componente igx-list.

<h5 class="h5">Shopping List</h5>
<igx-list class="list" *ngFor="let item of shoppingItems">
    <igx-list-item class="list-item">
         <span>{{item}}</span>
     </igx-list-item>
</igx-list>

import { ChangeDetectorRef, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
     selector: 'shopping-items',
     templateUrl: './child.component.html',
     styleUrls: ['./child.component.css']
})
export class ShoppingList {
     @Input() data: Observable<any>;
     shoppingItems: string[] = [];
     constructor(private changeDetector: ChangeDetectorRef) { }

     ngOnInit() {
         this.data.subscribe(item => {
             this.shoppingItems = [...this.shoppingItems, ...item];
             this.changeDetector.markForCheck();
         });
     }
}

Si no usamos el método markForCheck() aquí desde ChangeDetectorRef, Angular se negará a ejecutar la detección de cambios. Es por eso que necesitamos hacerlo manualmente. Con este método, Angular le decimos que ejecute la detección de cambios cuando una entrada en particular apareció cuando mutó.

Conclusión

Cuanto más grande sea el proyecto, más ralentizaciones puede tener. Angular detección de cambios es una técnica que puede ayudar a aumentar la eficiencia de la aplicación. Por lo tanto, para proyectos más grandes, sería mejor usar ChangeDetectionStrategy.OnPush, ya que ahorra rendimiento.