Angular跨组件监听变量变化取消订阅报ObjectUnsubscribedError如何解决

你直接对服务中全局共享的customerObserver Subject 实例调用了unsubscribe()，会直接销毁这个全局可观察对象，导致后续所有组件都无法再订阅或接收它发出的事件，这是ObjectUnsubscribedError报错的核心原因。正确的做法是只取消当前组件自身产生的订阅实例，不要销毁全局的 Subject 对象。

1. 先修正customer.service的定义 #

你当前的Subject泛型定义错误，你实际发送的是客户对象，不是布尔值：

// 替换原有的customerObserver定义，Customer是你的客户数据类型，无定义可先用any替代
customerObserver: Subject<Customer | null> = new Subject<Customer | null>();
// 若需要直接获取当前选中客户的最新值，也可改用BehaviorSubject，初始值设为null代表未选中
// customerObserver: BehaviorSubject<Customer | null> = new BehaviorSubject<Customer | null>(null);

选中客户时的触发逻辑保持不变，依旧调用this.customerObserver.next(this.customer)即可。

2. 调整组件内的订阅/取消订阅逻辑 #

以orders.component为例，products.component逻辑完全一致：

import { Subscription } from 'rxjs';

export class OrdersComponent implements OnInit, OnDestroy {
  // 存储当前组件产生的订阅实例
  private customerSub: Subscription | null = null;

  ngOnInit(): void {
    // 原有初始化判断逻辑保留
    if (this.customerService.customer) {
      this.loadOrders();
    }

    // 存储订阅返回的实例
    this.customerSub = this.customerService.customerObserver.subscribe(customer => {
      if(customer) {
        this.loadOrders();
      }
    });
  }

  ngOnDestroy() {
    // 仅取消当前组件自身的订阅，不操作全局Subject
    if (this.customerSub) {
      this.customerSub.unsubscribe();
    }
  }

  // 原有loadOrders等逻辑保持不变
  private loadOrders() {
    // 你的订单接口请求逻辑
  }
}

可选优化 #

如果你在服务中使用BehaviorSubject替代普通Subject，可以省略组件中ngOnInit的单独判断逻辑：BehaviorSubject会给每个新订阅的组件主动推送最新的客户选中状态，自动覆盖「组件初始化时已选中客户直接拉取数据」「客户变更拉取新数据」两个场景，组件内的ngOnInit可简化为：

ngOnInit(): void {
  this.customerSub = this.customerService.customerObserver.subscribe(customer => {
    if(customer) {
      this.loadOrders();
    }
  });
}

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