При проверке зарегистрированного пользователя переменная общего сервиса не определена

Question

Я намерен проверить, вошел ли пользователь в систему, эта информация должна быть доступна во всем приложении.

Для этого я использовал этот код в общем сервисном файле user.service.ts

import { Injectable } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/auth';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  public loggedIn:boolean;

  constructor() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.loggedIn=true;
      } else {
        this.loggedIn=false;
      }
    });
  }
}

Затем я внедрил этот сервис в компонент navbar, так что

(навигация-bar.component.ts)

import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.css']
})
export class NavigationBarComponent implements OnInit {

  isLoggedIn$ = this.userService.isLoggedIn;

  constructor(private userService:UserService, private router:Router) {
  }

  ngOnInit() {
  }

}

(навигационно-bar.component.html)

<li class="nav-item px-2">
  <button type="button" (click)="login()" class="btn btn-info">{{ 
userService.loggedIn===undefined?'undefined':userService.loggedIn }} 
</button>
</li>
<li *ngIf="!userService.loggedIn" class="nav-item px-2">
  <button type="button" (click)="login()" class="btn btn- 
info">Login</button>
 </li>
<li *ngIf="userService.loggedIn" class="nav-item px-2">
  <button type="button" (click)="logout()" class="btn btn-info">Log 
out</button>
</li>

Переменная userService.loggedIn равна undefined, я хочу, чтобы она отображала либо true, либо false в зависимости от того, вошел ли пользователь в систему или нет.

Answer 1

Не определено до тех пор, пока не будет завершено наблюдение firebase.auth().onAuthStateChanged. Вы можете установить loggedIn как BehaviorSubject<boolean> и использовать async pipe для получения значения. Как это:

export class UserService {

  private loggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public isLoggedIn = this.loggedIn.asObservable();


  constructor() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.loggedIn.next(true);
      } else {
        this.loggedIn.next(false);
      }
    });
  }
}

В компоненте .ts:

isLoggedIn$ = this.userService.isLoggedIn;
constructor(private userService:UserService) {}

В .html:

<li *ngIf="!isLoggedIn$ | async" /* ... */>
  ...
</li>