Angular anti-pattern: les Observables et le désabonnement

Les observables peuvent causer des fuites de mémoire si l'on ne prend pas la précaution de se désabonner.

// Don't do that
this.postService.getPosts().subscribe(
    posts => this.posts = posts;
)

Avant la sortie d'Angular 16, diverses techniques de désabonnement automatique étaient utilisées. Par exemple :

• Utiliser l'objet Subscription et l'interface OnDestroy

• Utiliser l'implémentation SubSink de Ward Bell avec l'interface OnDestroy

• Utiliser le pipe async

• Ou encore passer par une classe adapter qui implémente une fois pour toute la logique de désabonnement dans notre application - example ici

La plus simple de toutes ces techniques est le pipe async, car il prend en charge la souscription, la récupération des données et le désabonnement à notre place.

Avec l'arrivée d'Angular 16, les choses ont beaucoup évolué grâce au nouvel opérateur takeUntilDestroyed. Cet opérateur termine l'observable lorsque le contexte appelant (composant, directive, service, pipe, etc.) est détruit.

// Official Angular operator for automatic unsubscriptions
this.postService.getPosts().pipe(
    takeUntilDestroyed()
).subscribe(
    posts => this.posts = posts;
)

Mais une technique spéciale consiste à utiliser takeUntilDestroyed directement dans le service qui expose l'observable, de la manière suivante :

getPosts(): Observable<Post> {
    // This is done once for all
    // Nothing else to do in your components
    return this.http.get<Post>(...).pipe(
        takeUntilDestroyed()
    );
}

Ainsi, tous vos composants sont couverts, que vous utilisiez async ou non.