Angular中Firebase手机验证的reCAPTCHA状态Observable不更新问题

我一眼就看出问题所在了——你这里犯了Observable使用的典型错误：你在回调里直接替换了整个Observable实例，但模板里的async管道已经订阅了最初的那个null引用，根本不会感知到新的Observable。

问题根源 #

你的recaptchaSolved一开始是未初始化的Observable<boolean>（默认值为null），当reCAPTCHA验证通过/过期时，你直接给它赋值了新的of(true)或of(false)。但模板里的async管道早在组件初始化时就订阅了最初的null对象，不会自动切换到新的Observable上，所以模板永远显示null，哪怕控制台能正常打印回调信息。

解决方案：用BehaviorSubject管理状态 #

我们需要用BehaviorSubject（一种带初始状态的Subject）来代替普通的Observable，它允许我们推送新值给已有的订阅者，而不是替换整个Observable实例。

步骤1：修改组件类代码

首先导入必要的RxJS类：

import { BehaviorSubject, Observable } from 'rxjs';

然后把recaptchaSolved的定义改成BehaviorSubject，设置一个初始状态（比如false表示未验证，或者null表示未初始化，根据你的需求选择）：

export class AddComponent implements OnInit, OnDestroy {
  windowRef: any;
  @ViewChild('recaptchaContainer') recaptchaContainer: ElementRef;
  // 用BehaviorSubject替代普通Observable，初始状态设为false
  recaptchaSolved: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor(private win: WindowService) {}

  ngOnInit() {
    this.windowRef = this.win.windowRef;
    firebase.auth().useDeviceLanguage();
    
    this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      this.recaptchaContainer.nativeElement,
      {
        size: 'small',
        callback: response => {
          console.log(`reCAPTCHA solved`);
          // 不要重新赋值，用next()推送新状态
          this.recaptchaSolved.next(true);
        },
        'expired-callback': () => {
          console.log(`reCAPTCHA expired`);
          // 同样用next()推送过期状态
          this.recaptchaSolved.next(false);
        }
      }
    );
  }

  ngOnDestroy() {
    // 组件销毁时complete Subject，防止内存泄漏
    this.recaptchaSolved.complete();
  }
}

步骤2：模板无需修改

你的模板代码可以保持不变，async管道会自动订阅BehaviorSubject并实时接收状态更新：

{{ recaptchaSolved | async | json }}

为什么这样有效？ #

BehaviorSubject是一种有状态的Observable，它会保存当前的最新值，并且具备两个关键特性：

1. 当有新的订阅者（比如模板里的async管道）时，会立即推送当前的初始值
2. 每次调用next()方法时，所有已订阅的观察者都会收到新的状态更新

这样就能保证模板实时反映reCAPTCHA的验证状态了。

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