如何在Angular中異步管道可觀察對象

Question

我有一個要做一些異步工作的服務，如何將數據綁定渲染推遲到該服務完成其異步工作之前？

this.sessionService.onSessionChange().subscribe(function(session) {
    console.log(session);
    self.user = session.user;
});

服務：

onSessionChange(): Observable<Session> {
    return this.sessionObservable.asObservable();
}

未定義用戶，因為會話尚未准備好：

<h4>Hi {{user.name}}.</h4>

如何使用可觀察到onSessionChange的管道？

Answer 1

在Angular4中，一個常見的習慣用法是使用new as關鍵字，如下所示：

<ng-container *ngIf="session$ | async as session">
                                 <!-- ^^^^^^^^^^  "as" keyword -->
  <h4>Hi {{session.user.name}}</h4>
</ng-container>

如果要在模板中的多個位置使用session ，這將更加有用。

<ng-container>是懸掛*ngIf或*ngFor而無需向DOM添加更多節點。

Answer 2

就像@Sajeetharan回答的那樣，您可以使用safe navigation operator來避免從模板引發未定義的錯誤。

正如您在問題標題處所述，您可以使用Async Pipe自動訂閱/取消訂閱Observable。

步驟1：在您的組件處公開Observable：

// expose Observable in order to access at template
user$: any;
constructor(private sessionService: SessionService) {
  this.user$ = this.sessionService.onSessionChange();
}

步驟2：在模板上使用Async Pipe來訂閱創建的Observable

<h4>Hi {{(user$ | async)?.user.name}}.</h4>

工作演示

Answer 3

您也可以使用safe navigation operator來處理這種情況，

<h4>Hi {{user?.name}}.</h4>

Answer 4

使用pluck運算符具有async屬性：

在組件上：

this.userName$ = this.sessionService.onSessionChange().pluck('user', 'name')

在模板上：

<h4>{{ userName$ | async }}</h4>