Механизм обнаружения изменений Angular подводит меня - PullRequest
Новая
       18

Механизм обнаружения изменений Angular подводит меня

0 голосов
/ 04 февраля 2019

Я сражаюсь уже больше часа с довольно странной проблемой: 

<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();
  }

Использование-Case # 1, действительный : пользователь НЕ вошел в систему;затем он или она проходит процедуру google-auth (с механизмом всплывающих окон, предоставляемым Firebase) и ng-if get обновляется мгновенно, как и ожидалось .

Use-Case # 2недопустимый : после того, как пользователь вошел в систему и обновил страницу - даже если console.log сообщает, что isSignedIn становится true, как и ожидалось - никаких визуальных изменений не произойдет, пока пользователь не нажмет кнопку;только после того, как эта кнопка будет перерисована для правильной опции ng-if.

Я далеко не англский гуру и не очень разбираюсь в механизме обнаружения изменений.SOS.

1 Ответ

0 голосов
/ 04 февраля 2019

Используете ли вы cookie / JWT для поддержки вашего сеанса?Обновление может разрушить ваш сеанс и уничтожить значение isSignedIn.

Однако попробуйте использовать двустороннюю привязку, чтобы гарантировать синхронизацию компонента и DOM: 

<ng-container *ngIf="[(!isSignedIn)]; else elseTemplate">
...