Le pipe async
Abonnez-vous dans les modèles sans nettoyage manuel.
Le pipe async est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Fonctionnement du tuyau async
Le tuyau async s’abonne à un observable (ou à une promesse) dans le modèle, affiche la dernière valeur émise et se désabonne automatiquement lorsque le composant est détruit.
Utilisation de base
Liez directement un observable dans le modèle et faites-le passer par async.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}Afficher des objets avec async
Il fonctionne avec n’importe quel type de valeur émise. Combinez-le avec d’autres tuyaux comme json ou date.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>Éviter les abonnements multiples
Chaque utilisation de async crée un abonnement. L’utiliser plusieurs fois sur le même observable déclenche plusieurs requêtes HTTP. Utilisez la syntaxe as pour ne vous abonner qu’une seule fois.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>Avec le nouveau flux de contrôle
Dans les versions modernes d’Angular, utilisez @if avec as pour appliquer le même modèle avec un seul abonnement.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}Valeur null pendant l’attente
Avant la première émission, async renvoie null. Gérez explicitement l’état de chargement.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}Aucun désabonnement manuel nécessaire
Le tuyau se désabonne automatiquement lors de la destruction, ce qui élimine toute une catégorie de fuites mémoire. C’est pourquoi il constitue la méthode privilégiée pour utiliser des observables dans les modèles.
Changer d’observable
Si la référence de l’observable lié change, le tuyau async se désabonne automatiquement de l’ancien et s’abonne au nouveau.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}Tuyau async avec BehaviorSubject
Associer un service BehaviorSubject au tuyau async fournit une interface utilisateur réactive et claire, sans code d’abonnement manuel.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>Tuyau async ou toSignal
Les deux gèrent automatiquement les abonnements. Le tuyau async vit dans le modèle ; toSignal() introduit la valeur dans le code du composant sous forme de signal. Choisissez selon l’endroit où vous avez besoin de la valeur.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}Résumé des bonnes pratiques
Privilégiez le tuyau async (ou toSignal) aux abonnements manuels dans les composants. Utilisez as pour éviter les abonnements en double et gérez toujours l’état initial null ou de chargement.
Vérification rapide
Vérifiez votre compréhension du tuyau async.
Récapitulatif : le tuyau async
Le tuyau async s’abonne dans le modèle et effectue le nettoyage lors de la destruction.
- Utilisez
as(avec @if ou *ngIf) pour ne vous abonner qu’une seule fois. - Il renvoie null avant la première émission : gérez le chargement.
- Il est préférable aux abonnements manuels dans les modèles.
Vous avez terminé les fondamentaux de RxJS.
Questions Fréquemment Posées
La leçon « Le pipe async » est-elle gratuite ?
Oui — le texte complet de « Le pipe async » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le pipe async » ?
Abonnez-vous dans les modèles sans nettoyage manuel. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Le pipe async » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.