父组件列表更新后子组件触发ObjectUnsubscribedError的原因？

这个错误的核心原因是你错误地取消订阅了Observable本身，而不是具体的订阅实例，导致整个Observable被关闭，后续新组件的订阅直接失败。

你代码里的问题点 #

看你的子组件代码：

ngOnInit() {
  // 这里订阅了Observable，但没有保存订阅的Subscription对象
  this.someOtherService.mapping$.subscribe(mapping => { this.mapping = mapping; });
}
ngOnDestroy() {
  // 错误：直接调用Observable的unsubscribe()，会关闭整个Observable
  this.someOtherService.mapping$.unsubscribe();
}

当第一个子组件销毁时，你调用了mapping$.unsubscribe()，这会直接关闭这个Observable实例。之后父组件重新加载列表创建新的子组件时，新组件再去订阅这个已经被关闭的Observable，就会抛出ObjectUnsubscribedError。

而你移除unsubscribe后功能正常，是因为Observable没有被关闭，新组件能正常订阅，但这会引发内存泄漏——旧组件销毁后，它们的订阅仍然存在，会持续接收数据流，占用不必要的内存。

正确的实现方式 #

你需要保存订阅返回的Subscription对象，在组件销毁时取消这个具体的订阅，而不是关闭整个Observable：

import { Subscription } from 'rxjs';

// 子组件类中定义一个Subscription变量
private mappingSubscription!: Subscription;

ngOnInit() {
  // 保存订阅的Subscription实例
  this.mappingSubscription = this.someOtherService.mapping$.subscribe(mapping => {
    this.mapping = mapping;
  });
}

ngOnDestroy() {
  // 取消当前组件的订阅，而不是Observable本身
  if (this.mappingSubscription) {
    this.mappingSubscription.unsubscribe();
  }
}

更优雅的替代方案：使用Async管道 #

在Angular中，推荐使用async管道来自动管理订阅，它会在组件销毁时自动取消订阅，完全不需要手动写unsubscribe：

1. 子组件中不需要手动订阅，直接把Observable暴露给模板：

// 子组件类
mapping$ = this.someOtherService.mapping$;

2. 模板中使用async管道获取数据：

<!-- 子组件模板示例 -->
<div *ngIf="mapping$ | async as mapping">
  <!-- 使用mapping数据 -->
</div>

这种方式既避免了手动管理订阅的麻烦，也不会出现内存泄漏或Observable被误关闭的问题。

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