Die Arbeit mit Observables ist sicherlich täglich Brot für die meisten Angular Entwickler. Ein Template-Feature ist dabei allerdings vielen Entwicklern kaum ein Begriff, obwohl es in vielerlei Hinsicht hilfreich ist.
Eine Komponente benötigt zur Initialisierung Daten einer API. Nichts Ungewöhnliches. Ein einfacher Ansatz der gewählt wird, ist häufig eine Subscription im Konstruktor durchzuführen und das Ergebnis in einem Attribut abzulegen um dann im Template “entspannt” die einzelnen Attribute im Zugriff zu haben.
this.service.loadUser().subscribe(user => {
this.user = user;
})
- ein zusätzliches Attribut welches initial “undefined” ist, was im Template berücksichtigt werden muss
- korrekterweise müssten wir in vielen Fällen ein “unsubscribe” im ngOnDestroy durchführen
- Templates von Komponenten, die mit der OnPush-ChangeDetectionStrategy registriert sind, werden nicht korrekt aktualisiert
Angulars async-Pipe löst all diese Probleme. Um diese nicht an x-Stellen im Template einsetzen zu müssen, um auf einzelne Attribute zuzugreifen, bietet Angular die “as”-Deklaration.
@if(service.loadUser() | async; as user){
<!-- oder *ngIf="loadUser$ | async as user" -->
Hallo: {{user.username}}
} @else{
...wait until data is loaded...
}
Sobald das Observable einen Wert liefert, wird dieser in der Variable “user” zur Verfügung gestellt, ein Unsubscribe erfolgt automatisch und auch in “OnPush”-Komponenten sorgt Angular dank async-Pipe für die korrekte Aktualisierung der UI.
Live. In Farbe. Github
