Die async-Pipe
Abonnieren Sie in Templates ohne manuelle Bereinigung.
Die async-Pipe ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was die async-Pipe tut
Die async-Pipe abonniert im Template ein Observable (oder Promise), rendert den zuletzt ausgegebenen Wert und beendet das Abonnement automatisch, wenn die Komponente zerstört wird.
Grundlegende Verwendung
Binden Sie ein Observable direkt im Template und leiten Sie es durch async.
@Component({
template: '<p>{{ message$ | async }}</p>'
})
export class HelloComponent {
message$ = of('Hello from RxJS');
}Objekte mit async rendern
Die Pipe funktioniert mit jedem ausgegebenen Typ. Kombinieren Sie sie mit anderen Pipes wie json oder date.
user$ = this.http.get('/api/me');
// template:
// <pre>{{ user$ | async | json }}</pre>Mehrere Abonnements vermeiden
Jede Verwendung von async erstellt ein Abonnement. Wenn Sie dieselbe Pipe mehrfach für dasselbe Observable verwenden, werden mehrere HTTP-Aufrufe ausgelöst. Verwenden Sie die as-Syntax, um nur einmal zu abonnieren.
<!-- one subscription, reused as "user" -->
<div *ngIf="user$ | async as user">
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
</div>Mit dem neuen Kontrollfluss
Verwenden Sie in modernem Angular @if mit as, um dasselbe Muster mit nur einem Abonnement umzusetzen.
@if (user$ | async; as user) {
<p>{{ user.name }}</p>
<p>{{ user.email }}</p>
}Null während des Wartens
Vor der ersten Ausgabe liefert async den Wert null. Behandeln Sie den Ladezustand ausdrücklich.
@if (data$ | async; as data) {
<list [items]="data" />
} @else {
<p>Loading...</p>
}Kein manuelles Abbestellen erforderlich
Die Pipe beendet das Abonnement beim Zerstören automatisch und verhindert damit eine ganze Klasse von Speicherlecks. Deshalb ist sie die bevorzugte Methode, um Observables in Templates zu verwenden.
Zwischen Observables wechseln
Wenn sich die Referenz des gebundenen Observables ändert, beendet die async-Pipe automatisch das Abonnement des alten Observables und abonniert das neue.
search(term: string) {
this.results$ = this.http.get('/api/search?q=' + term);
// async pipe swaps subscriptions for you
}Async-Pipe mit BehaviorSubject
Die Kombination eines BehaviorSubject in einem Service mit der async-Pipe ermöglicht eine übersichtliche reaktive Benutzeroberfläche ohne manuellen Abonnement-Code.
// service: readonly count$ = this.subject.asObservable();
// template: <span>{{ count$ | async }}</span>Async-Pipe und toSignal im Vergleich
Beide verwalten Abonnements automatisch. Die async-Pipe wird im Template verwendet; toSignal() stellt den Wert im Komponentencode als Signal bereit. Entscheiden Sie je nachdem, wo Sie den Wert benötigen.
import { toSignal } from '@angular/core/rxjs-interop';
user = toSignal(this.http.get('/api/me'));
// template: {{ user()?.name }}Zusammenfassung der bewährten Vorgehensweisen
Bevorzugen Sie in Komponenten die async-Pipe (oder toSignal) gegenüber manuellen Abonnements. Verwenden Sie as, um doppelte Abonnements zu vermeiden, und behandeln Sie den anfänglichen Zustand mit null bzw. den Ladezustand immer.
Kurzer Test
Testen Sie Ihr Verständnis der async-Pipe.
Zusammenfassung: Die async-Pipe
Die async-Pipe abonniert im Template und bereinigt das Abonnement beim Zerstören.
- Verwenden Sie
as(mit @if oder *ngIf), um nur einmal zu abonnieren. - Vor der ersten Ausgabe liefert sie null – behandeln Sie den Ladezustand.
- Für Templates ist sie manuellen Abonnements vorzuziehen.
Sie haben RxJS Fundamentals abgeschlossen.
Häufig gestellte Fragen
Ist die Lektion „Die async-Pipe“ kostenlos?
Ja — der vollständige Text von „Die async-Pipe“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die async-Pipe“?
Abonnieren Sie in Templates ohne manuelle Bereinigung. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Die async-Pipe“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.