为什么我在尝试检查用户是否使用 AngularFireAuth 登录 Firebase 时遇到此错误？

Question

我正在使用 AngularUI 处理 Angular 应用程序在 Firebase 上处理用户注册\\登录（我也在使用 AngularFire2）。

所以我有这个家庭组件打字稿代码：

import { Component, NgZone, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(public afAuth: AngularFireAuth,
              private router:Router,
              private ngZone: NgZone
             ) { }

  ngOnInit(): void {

    this.afAuth.authState.subscribe(this.firebaseAuthChangeListener);
  }
 
  
  private firebaseAuthChangeListener(response) {
 
    if (response) {
      console.log('Logged in :)');
      this.ngZone.run(() => this.router.navigate(['/home']));
     
    } else {
      console.log('Logged out :(');
    }
  }
}

这是该组件的视图代码：

<div *ngIf="afAuth.currentUser">
    <h1>Logged in</h1>
</div>
<div *ngIf="!afAuth.currentUser">
    <h1>Logged out</h1>
    <firebase-ui></firebase-ui>
</div>

因此，正如您在视图中所看到的，我正在尝试使用afAuth.currentUser属性来检查用户是否已登录并显示与用户状态相关的正确 div（如果已登录或已注销）。

问题是这样做是行不通的。 尝试打开我的应用程序需要很长时间（浏览器的选项卡似乎被冻结，因为我无法打开控制台），最后它给了我一个错误。

我确信 FirebaseUI 配置正确，因为如果我只将此行放入我的主页组件 html：

<firebase-ui></firebase-ui>

我正确获得了我期望的 firebase ui 登录。

所以问题应该与我如何检查用户是否在这一行登录有关：

<div *ngIf="afAuth.currentUser">

使用AngularFireAuth类作为组件构造函数中的依赖项传递。

怎么了？ 我错过了什么？ 如何正确检查用户是否从我的页面登录\\退出？

Answer 1

对于检查用户状态你让我们推荐这篇文章https://firebase.google.com/docs/auth/web/manage-users?authuser=0我个人使用这种方法来管理用户状态：

afAuth.onAuthStateChanged(U => {
      if (U) {
        console.log('User loget in');
      } else {
        console.log('Log Out');
      }
    });