javascript - AngularFire 不会触发更改检测

标签 javascript angular rxjs firebase-authentication angularfire2

我正在使用 AngularFire 和 Angular 8 来构建一个应用程序,但我有一个愚蠢的问题(我相信它实际上很愚蠢)。

我构建了一个简单的服务来包装 AngularFireAuth :

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase';
import { Subject } from 'rxjs';
import { MessageService } from 'primeng/api';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private user: Subject<User> = new Subject();
  private isLoggedIn: Subject<boolean> = new Subject();

  constructor(private afAuth: AngularFireAuth, private messageService: MessageService) {
    this.afAuth.auth.onAuthStateChanged(user => {
      this.user.next(user);
      this.isLoggedIn.next(user !== null);
    });
  }

  isAuthenticated() {
    return this.isLoggedIn.asObservable();
  }
}

然后,我将它注入(inject)我的 HomeComponent并订阅了ObservableisAuthenticated 返回方法:

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });
  }
}

但是,当箭头函数传递给 subscribe方法被调用,不执行重新渲染。但是,console.log调用确实在 DevTools 上显示“用户已通过身份验证?真”。

我做过的其他一些测试:如果我调用 setTimeout从传递给 subscribe 的箭头函数中, 结果是一样的。无需重新渲染,并且 DevTools 上的消息显示“用户已通过身份验证?是的”。

但是,如果我调用 setTimeout (在这个延迟 10 秒的测试中)在 subscribe 之外,组件在这 10 秒后重新渲染:

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

  constructor(private authService: AuthService) { }

  ngOnInit() {
    this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });

    setTimeout(() => {
      this.isAuthenticated = true;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    }, 10000)
  }
}

我在这里想念什么?我误解了什么?

最佳答案

这是因为在组件初始化之后,您正在调用您的身份验证
在构造函数中调用它可以工作

import { Component, OnInit } from "@angular/core"
import { AuthService } from '../auth/auth.service';

@Component({
  selector: 'app-homepage',
  styleUrls: ['./homepage.component.scss'],
  templateUrl: './homepage.component.html'
})
export class HomepageComponent implements OnInit {
  isAuthenticated: boolean = false;

   constructor(private authService: AuthService) {
     this.authService.isAuthenticated().subscribe((isAuth) => {
      this.isAuthenticated = isAuth;
      console.log(`User is authenticated? ${this.isAuthenticated}`);
    });
    }

  ngOnInit(){}

}

关于javascript - AngularFire 不会触发更改检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59986113/

相关文章:

javascript - rxjs 中的动态定时器

javascript - 为什么 `BehaviorSubject` 没有发出最后一个值

javascript - 对数组元素求和的抽象函数

javascript - 为什么这个循环会逐渐变慢?

javascript - 如何以 Angular 获取矩阵表中选定的复选框

javascript - 进行第二次 http 调用并在同一个 Observable 中使用结果

angular - 通过 Jest 和 Spectator 全局导入模块

javascript - ReactiveX 中数组实体和子项的调用方法

javascript - 将动态元素绑定(bind)到函数;只剩下一个绑定(bind)

javascript - 从 "socket"库向 "websockets/ws"对象添加方法