Introducción
Las tuberías angulares integradas se implementan fácilmente dentro de la sintaxis de la plantilla angular y son prácticas para manejar tareas de formato comunes.
Una tubería asincrónica le permite detectar cambios y propagar eventos asincrónicos directamente en la plantilla sin cambiar el valor subyacente de los datos.
Averigüe cómo use Async Pipes para suscribirse a Observables and Promises.
¿Qué es una tubería asíncrona?
Una tubería asíncrona es una función angular incorporada que le permite suscribirse y darse de baja automáticamente de los objetos. Cuando se suscribe a un Observable o Promise, Async Pipe crea una copia de la última salida emitida, modifica su formato y muestra el valor resultante directamente en la vista. Async Pipe utiliza una sintaxis sencilla:
{{ obj_expression | async }}
También puede usar Async Pipes para evitar ejecuciones innecesarias de detección de cambios angulares y aplicar comprobaciones solo a Observables que reciben nuevos valores.
¿Cuándo usar tuberías asíncronas?
De forma predeterminada, Angular ejecuta la detección de cambios en todos los componentes antes de actualizar el DOM. Este proceso puede potencialmente agotar los recursos del sistema y afectar negativamente a su aplicación.
El uso de Async Pipes con la estrategia de detección de cambios de OnPush puede mejorar el rendimiento de la aplicación web. Al establecer el Detector de cambios clase de <strong>OnPush</strong>, solo un Observable que registra un nuevo valor debe pasar por el proceso de detección de cambios.
El modo OnPush usa Async Pipe para informar a Angular que el componente solo rastrea los cambios de valor que se originan en su padre. Angular no necesita verificar el componente si no hubo cambios registrados en el componente principal.
Además, un Async Pipe agiliza el proceso de detección de cambios de Angular al suscribirse y cancelar automáticamente la suscripción de un componente precisamente al final de su ciclo de vida. Ya no necesita darse de baja de un Observable o Promise manualmente. Async Pipes garantiza que las suscripciones redundantes no permanezcan abiertas después de que se destruya el componente y provoquen una posible pérdida de memoria.
Usar tuberías asíncronas con observables
Puede suscribirse a un objeto observable para realizar un seguimiento de los cambios y pasar funciones que se ejecutan en eventos específicos. Una tubería asíncrona automatiza este proceso consumiendo los valores del flujo de datos observables y exponiendo los valores resueltos para la vinculación.
En este ejemplo, se utiliza una tubería asíncrona con el * ngFor directiva para resolver un observable en un tipo de matriz.
import {Component} from '@angular/core';
import {Observable, of} from 'rxjs';
@Component({
selector: 'async-observable-pipe',
template: `<ul><li *ngFor="let d of uList | async">{{d}}</li></ul>`
})
export class AppComponent {
uList: Observable<number[]>;
constructor() {
this.uList = this.getData();
}
getData(): Observable<number[]> {
return of([1,2,3,4,5,6,7,8]);
}
}
Async Pipe mantiene la suscripción a Observable y continúa entregando valores en tiempo real.
Una vez que se destruye el componente observado, Async Pipe cancela categóricamente la suscripción a Observable.
Usar tuberías asíncronas con promesas
Puede utilizar la función Promise para resolver un valor de forma asincrónica. Las promesas se limitan a un ciclo de una llamada, ya sea un Resolvemos llamar con un valor de cumplimiento único o un rechazar llamar con un solo mensaje de error.
Necesitamos evaluar el valor resultante de forma asincrónica y mostrarlo directamente. Puede usar el resultado para llamar a una API que:
- Devuelve una promesa.
- Pasa esa promesa al enlace usando Async Pipe.
- Devuelve el nuevo valor y lo muestra en la vista.
@Component({
selector: 'async-promise-pipe',
template: `<div>
<code>promise|async</code>:
<button (click)="clicked()">{{ arrived ? 'Reset' : 'Resolve' }}</button>
<span>Wait for it... {{ greeting | async }}</span>
</div>`
})
export class AsyncPromisePipeComponent {
greeting: Promise<string>|null = null;
arrived: boolean = false;
private resolve: Function|null = null;
constructor() {
this.reset();
}
reset() {
this.arrived = false;
this.greeting = new Promise<string>((resolve, reject) => {
this.resolve = resolve;
});
}
clicked() {
if (this.arrived) {
this.reset();
} else {
this.resolve!('hi there!');
this.arrived = true;
}
}
}
Si una promesa debe devolver un valor en un evento, como un clic de usuario, la promesa se resolverá con el primer clic. Los observables ofrecen más flexibilidad y pueden realizar la misma función para múltiples clics de usuarios.
Conclusión
Ahora comprende mejor las tuberías asíncronas y cómo usarlas para suscribirse y cancelar la suscripción a Observables and Promises.
La implementación de Async Pipes en los casos de uso adecuados hace que el proceso de detección de cambios Angular sea más eficiente y, en última instancia, mejora la experiencia del usuario final.
Si es nuevo en Angular, aprenda cómo instalar Angular en Windows.
