60. Utilisation de l'Async Pipe pour la gestion automatique des abonnements

L' AsyncPipe (| async) est l'outil le plus efficace d'Angular pour gérer les Observables dans les templates. Il gère l'abonnement, l'extraction de la valeur et le désabonnement automatique lors de la destruction du composant.

Le problème : Abonnements manuels

S'abonner manuellement dans la classe du composant nécessite de stocker la Subscription et d'appeler unsubscribe() dans ngOnDestroy pour éviter les fuites de mémoire.

typescript // La méthode risquée (fuite de mémoire) : ngOnInit() { this.dataService.getData().subscribe(data => this.data = data); // Oubli de l'unsubscribe, provoque une fuite si le composant est détruit }

La solution : AsyncPipe

L' AsyncPipe prend un Observable (ou une Promise) en entrée, s'y abonne et renvoie la dernière valeur émise.

Classe du composant (Aucun abonnement requis)

typescript // data-viewer.component.ts import { Observable } from 'rxjs'; import { DataService } from '../data.service';

export class DataViewerComponent implements OnInit { // On stocke l'Observable lui-même, pas le tableau de données products$: Observable<Product[]> | undefined;

constructor(private dataService: DataService) { }

ngOnInit(): void { this.products$ = this.dataService.getProducts(); } }

Utilisation dans le template

html

Avantages :

1. Sécurité : Zéro fuite de mémoire grâce au désabonnement automatique.
2. Immuabilité : Garde la logique du composant propre, focalisée sur les flux, pas sur les effets secondaires.
3. Performance : Fonctionne naturellement avec la Change Detection d'Angular, surtout avec la stratégie OnPush.