Angular BehaviorSubject仅在组件加载时触发一次订阅问题

可能的原因及解决方案 #

1. 服务实例不唯一（最常见原因） #

Angular中，若在组件的providers数组中声明FormMenuService，会为每个组件创建独立的服务实例。这会导致Toolbar组件调用的是自身的服务实例，而Form组件订阅的是另一个实例的BehaviorSubject，两者完全独立，自然无法接收后续值。

解决方法：

• 修改服务的@Injectable装饰器，将其注册到根注入器，确保全局单例：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root' // 改为根注入器，保证全应用只有一个服务实例
})
export class FormMenuService {
    openMenu: BehaviorSubject<any> = new BehaviorSubject<any>(null);

    toggle(): void {
        this.openMenu.next({ test: 'test' });
    }
}

• 检查Form组件和Toolbar组件的@Component装饰器，移除providers数组中的FormMenuService项。

2. 代码语法错误导致订阅未正确建立 #

你的Form组件订阅代码末尾缺少闭合括号，会导致语法错误，订阅逻辑无法正常执行：

// 错误写法（缺少闭合的)和;）
ngAfterViewInit(): void {
  this.formMenuService.openMenu.subscribe((data) => {
    console.log(data);
    this.sidenavMenu.open();
  }
}

// 正确写法
ngAfterViewInit(): void {
  this.formMenuService.openMenu.subscribe((data) => {
    console.log(data);
    this.sidenavMenu.open();
  });
}

3. Form组件已销毁或订阅被提前取消 #

如果调用openFormMenu时Form组件已被销毁（比如路由导航离开），订阅会自动取消；若你使用takeUntil等操作符管理订阅，销毁信号提前触发也会导致无法接收后续值。

解决方法：

• 确认调用openFormMenu时Form组件仍处于活跃状态。
• 检查订阅管理逻辑，确保销毁信号（如destroy$）未提前发出。

验证步骤 #

1. 在FormMenuService的toggle方法中添加日志，确认每次调用都执行了next：

toggle(): void {
  console.log('toggle方法已执行，正在发送新值');
  this.openMenu.next({ test: 'test' });
}

2. 在Form组件和Toolbar组件中分别打印服务实例，确认是同一个对象：

// Form组件中
console.log('Form组件的服务实例:', this.formMenuService);

// Toolbar组件中
console.log('Toolbar组件的服务实例:', this.formMenuService);

若两个实例的内存地址不同，说明是服务实例不唯一的问题。

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