Блог

На домашней странице я проверяю статус входа в систему, и в зависимости от этого статуса я показываю / скрываю некоторые компоненты. В первый раз все работает нормально.

Если пользователь не вошел в систему, он показывает «компонент входа» вместо слота «SiteLogin». Но после процесса входа в систему другой компонент не отображается, пока я не выполню перезагрузку вручную (после перезагрузки отображается правильный компонент).

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

Есть ли какой-либо способ исправить это (или) любой альтернативный способ достижения той же функциональности?

app.component.html

     <cx-storefront></cx-storefront>

    <ng-container *ngIf="user$ | async as user; else login">    
       <cx-page-slot position="HeaderLinks"></cx-page-slot>
     </ng-container>

     <ng-template #login>
       <ng-template cxOutletRef="SiteLogin">
          <app-signin-menu></app-signin-menu>
       </ng-template>
     </ng-template>
  

app.component.ts

     export class AppComponent implements OnInit{
      user$: Observable<User>;
      constructor(
        private auth: AuthService, private userService: UserService
      ) {}
      ngOnInit(){
        this.user$ = this.auth.isUserLoggedIn().pipe(
          switchMap((isUserLoggedIn) => {
            if (isUserLoggedIn) {
              return this.userService.get();
            } else {
              return of(undefined);
            }
          })
        );
      }
    }