Angular项目中BehaviorSubject订阅者未检测到权限值变更如何解决

问题根因 #

1. Angular服务不执行ngOnInit生命周期
   Angular的生命周期钩子仅对组件、指令生效，@Injectable装饰的服务类不会触发ngOnInit方法，你写的初始化读取权限逻辑getUsrPrivileges()从未执行，页面刷新后无法读取IndexedDB中已存储的权限值。
2. RxJS包混用导致流订阅失效
   AppMenuComponent中Subject从rxjs-compat导入，IndexedDBService中的BehaviorSubject从官方rxjs包导入，两个不同包导出的Observable流不互通，订阅后无法接收变更通知。
3. 空值类型风险
   localforage.getItem读取不存在的key时会返回null，直接赋值给布尔类型的BehaviorSubject会导致值类型异常，影响显隐逻辑判断。

你怀疑的「订阅前发值导致收不到通知」的情况不存在：BehaviorSubject的特性就是新订阅者会自动收到订阅前最后一次发射的值，只要是同一个服务实例，订阅后肯定能拿到最新值。

修复步骤 #

1. 统一RxJS导入
   把AppMenuComponent中的导入语句替换为统一的rxjs包导入，删除rxjs-compat的引用：

// 原错误导入
// import { Subject } from 'rxjs-compat';
// 替换为
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

2. 补充订阅销毁逻辑
   给权限订阅添加takeUntil销毁逻辑，避免内存泄漏：

getUsrPrivileges(){
  this._indexedDBService.getER()
    .pipe(takeUntil(this.unsubscribe))
    .subscribe(value => this.er = value);
  this._indexedDBService.getEW()
    .pipe(takeUntil(this.unsubscribe))
    .subscribe(value => this.ew = value);
  this._indexedDBService.getEU()
    .pipe(takeUntil(this.unsubscribe))
    .subscribe(value => this.eu = value);
  this._indexedDBService.getED()
    .pipe(takeUntil(this.unsubscribe))
    .subscribe(value => this.ed = value);
}

3. 修正服务初始化逻辑
   将IndexedDBService中ngOnInit的逻辑挪到构造函数中执行，保证页面刷新时能读取已有权限：

constructor(
  private localforage: LocalForageService
){
  this.isLoading = new BehaviorSubject(false);
  // 初始化读取IndexedDB权限
  this.getUsrPrivileges();
}
// 删除无用的ngOnInit方法

4. 空值兼容处理
   修改getUsrPrivileges方法，将null值转为布尔值：

getUsrPrivileges(){
  this.localforage.getItem('er').subscribe(value => this.er.next(!!value));
  this.localforage.getItem('ew').subscribe(value => this.ew.next(!!value));
  this.localforage.getItem('eu').subscribe(value => this.eu.next(!!value));
  this.localforage.getItem('ed').subscribe(value => this.ed.next(!!value));
}

额外检查项 #

确认所有组件的providers数组中没有重复注册IndexedDBService，仅保留app.module.ts中的全局注册，避免生成多个服务实例导致流不互通。

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