0

到目前为止，我已经为一个非常奇怪的问题而战了一个多小时：

<mat-toolbar>
  <mat-toolbar-row>
    <ng-container *ngIf="!isSignedIn; else elseTemplate">
      <button mat-button [matMenuTriggerFor]="signInOptions">
        <i class="fas fa-sign-in-alt"></i>
      </button>
      <mat-menu #signInOptions="matMenu">
        <button mat-menu-item>
          <app-google-auth></app-google-auth>
        </button>
      </mat-menu>
    </ng-container>
    <ng-template #elseTemplate>
      <button mat-button [matMenuTriggerFor]="userOptions">
        <i class="fas fa-user"></i>
        {{ signedInUser.displayName }}
      </button>
      <mat-menu #userOptions="matMenu">
        <button mat-menu-item (click)="signOut()">
          Sign Out <i class="fas fa-sign-in-alt"></i>
        </button>
      </mat-menu>
    </ng-template>
  </mat-toolbar-row>
</mat-toolbar>

...以及上述视图背后的代码：

ngOnInit(): void {
    const authStateChangedSubject = new BehaviorSubject<firebase.User>(null);
    this.angularFireAuth.auth.onAuthStateChanged(
      next => authStateChangedSubject.next(next),
      error => authStateChangedSubject.error(error),
      () => authStateChangedSubject.complete());
    authStateChangedSubject.pipe(
      tap(
        firebaseUser => {
          if (firebaseUser) {
            this.isSignedIn = true;
            this.signedInUser = firebaseUser;
          } else {
            this.isSignedIn = false;
          }
        }))
      .subscribe();
  }

用例 #1，有效的一个：用户未登录；然后他或她通过 google-auth 程序（使用 Firebase 提供的弹出机制）和ng-if get 按预期立即更新。

用例#2，无效的：在用户登录并刷新页面后——即使console.log报告isSignedIn变成true预期的那样——除非点击按钮，否则不会发生视觉变化；只有在该按钮被重新呈现为正确的ng-if选项之后。

我远非 Angular 大师，对变更检测机制知之甚少。求救。

4

1 回答 1

0

您是否使用 cookie/JWT 来维护您的会话？刷新可能会破坏您的会话并消除 isSignedIn 值。

但是，尝试使用双向绑定来确保组件和 DOM 保持同步：

<ng-container *ngIf="[(!isSignedIn)]; else elseTemplate">
于 2019-02-04T20:22:11.020 回答