组件嵌套场景下ManualAmountComponent持有已销毁组件引用问题

你遇到的核心问题是组件销毁后订阅未及时清理，导致旧组件实例仍在响应数据流，再加上箭头函数的this绑定特性，让这个问题表现得更明显，具体拆解如下：

1. 订阅泄漏是根本原因 #

你的ManualAmountComponent在ngOnInit里订阅了expandedDetailService.entity$，但完全没做订阅清理工作。当你从CollectionComponent切换到BacklogComponent时，CollectionComponent本身的ngOnDestroy虽然触发了，但它内部嵌套的ManualAmountComponent的订阅还挂在expandedDetailService.entity$的观察者列表里。

所以当BacklogComponent加载后，expandedDetailService.entity$发射新数据时，旧的ManualAmountComponent实例（属于CollectionComponent）和新的实例（属于BacklogComponent）都会收到数据，各自调用传入的maxValueFunction，也就出现了控制台同时输出两个组件实例的情况。

2. 箭头函数的this绑定让问题显性化 #

你在maxValue()里返回的箭头函数会捕获外层组件（比如CollectionComponent）的this上下文。当旧的ManualAmountComponent实例调用这个函数时，this依然指向已经销毁的CollectionComponent，所以控制台会输出它的实例信息。

修复方案 #

方案一：手动清理订阅 #

在ManualAmountComponent中保存订阅对象，在组件销毁时主动取消订阅：

import { Subscription } from 'rxjs';

export class ManualAmountComponent implements OnInit, OnDestroy {
  private entitySubscription?: Subscription;

  ngOnInit() {
    this.entitySubscription = this.expandedDetailService.entity$
      .subscribe((gotEntity: T) => {
        if (gotEntity) {
          this.element = gotEntity;
          this.maxValue = this.maxValueFunction(this.element);
        }
      });
  }

  ngOnDestroy() {
    // 销毁时移除旧实例的观察者，避免内存泄漏
    this.entitySubscription?.unsubscribe();
  }
}

方案二：使用async管道自动管理订阅 #

如果你的模板需要用到entity$的数据，可以用Angular的async管道替代手动订阅——它会自动在组件销毁时清理订阅，省去手动管理的麻烦：

<!-- 在ManualAmountComponent的模板中 -->
<div *ngIf="expandedDetailService.entity$ | async as entity">
  <!-- 直接使用entity数据即可 -->
</div>

对应的组件代码可以简化：

ngOnInit() {
  // 移除手动订阅逻辑，交给async管道处理
}

额外优化：重置服务数据流（可选） #

如果expandedDetailService.entity$是BehaviorSubject类型，它会在新订阅时发射最新值。你可以在组件销毁时重置这个值，避免新组件加载时收到旧数据：

// 比如在CollectionComponent的ngOnDestroy中
ngOnDestroy() {
  this.expandedDetailService.entity$.next(null);
}

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