AngularFire未触发Angular 8组件变更检测问题求助

嘿，我来帮你拆解下这个问题的核心原因，以及对应的解决方案～

问题根源：Angular的变更检测与NgZone #

你遇到的组件不重渲染问题，本质是Firebase原生的onAuthStateChanged回调运行在Angular的NgZone（变更检测上下文）之外。

Angular的变更检测机制依赖于NgZone来追踪异步操作：当你在NgZone内修改组件属性时，Angular会自动触发视图更新；但如果异步操作跳出了NgZone（比如Firebase的原生回调、某些第三方库的异步方法），Angular就感知不到属性变化，自然不会重渲染组件。

而你测试里「subscribe外部的setTimeout能触发重渲染」，是因为Angular对setTimeout这类浏览器原生API做了“猴子补丁”，会自动把它们的回调包裹进NgZone里，所以能触发变更检测。

解决方案：两种可行的修复方式 #

方案1：改用AngularFire提供的authState Observable（推荐）

AngularFire已经帮我们把Firebase的异步操作封装进NgZone里了，直接用它提供的authState替代原生的onAuthStateChanged就好，不用手动处理NgZone：

修改你的AuthService：

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

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 直接复用AngularFire的authState，无需自己维护Subject
  private user$: Observable<User | null> = this.afAuth.authState;
  private isLoggedIn$: Observable<boolean> = this.user$.pipe(
    map(user => user !== null)
  );

  constructor(private afAuth: AngularFireAuth, private messageService: MessageService) {}

  isAuthenticated(): Observable<boolean> {
    return this.isLoggedIn$;
  }
}

这样组件里的订阅操作就会自动触发Angular的变更检测，视图也会跟着更新。

方案2：手动将回调包裹进NgZone

如果你坚持要用Firebase原生的onAuthStateChanged，可以注入NgZone，把更新Subject的代码手动放进NgZone的上下文里：

修改AuthService的构造函数：

import { Injectable, NgZone } from '@angular/core';
// 其他导入不变

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

  constructor(
    private afAuth: AngularFireAuth, 
    private messageService: MessageService,
    private ngZone: NgZone // 注入NgZone
  ) {
    this.afAuth.auth.onAuthStateChanged(user => {
      // 把属性更新逻辑包裹进NgZone.run()
      this.ngZone.run(() => {
        this.user.next(user);
        this.isLoggedIn.next(user !== null);
      });
    });
  }

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

你的理解误区 #

你可能默认「只要修改了组件的属性，Angular就会自动重渲染」，但实际上Angular的变更检测只对NgZone内的异步操作生效。第三方库（比如Firebase原生API）的异步回调如果没有被Angular封装，就会跳出NgZone，导致变更检测不触发。

内容的提问来源于stack exchange，提问作者Digituz