等待一个可观察的物体在Angular中解析

Question

<ng-container *ngIf="user | async; else login"> 
    // redirect to home page
</ng-container>

<ng-template #login>
   // display login form
</ng-template>

在显示“登录”表单之前，如何等待可观察到的“用户”解决？

Answer 1

您可以在模板中添加以下内容：

<ng-container *ngIf="$loaded | async; else loading"> 
  <ng-container *ngIf="$user | async; else login"> 
      // redirect to home page
  </ng-container>

  <ng-template #login>
    // display login form
  </ng-template>
</ng-container>

<ng-template #loading>
   // loading
</ng-template>

并在组件代码中：

  $loaded = this.$user.pipe(
    mapTo(true),
    startWith(false)
  );