Angular 4：Observable订阅中this引用指向旧数据问题

看起来你遇到的问题在Angular开发里挺常见的，核心原因大概率是订阅未及时清理导致旧组件实例的回调仍在执行，或者是变更检测的同步问题。咱们一步步来拆解和解决：

首先排查最常见的根源：未取消订阅导致内存泄漏 #

你已经把订阅实例存在了this.myItemsSubscription里，但如果没在组件销毁时取消订阅，当组件被销毁（比如路由跳转、组件被移除）后，旧的组件实例依然会留在内存中，当dataService.myItemsChanged发射新数据时，旧实例的回调函数会被触发——这时候回调里的this就是旧组件的实例，自然会拿到旧的itemsForm数据或者组件状态。

解决方案：在ngOnDestroy中取消订阅 #

给你的组件加上销毁钩子，手动清理订阅：

ngOnDestroy(): void {
  // 确保订阅存在时再取消，避免报错
  if (this.myItemsSubscription) {
    this.myItemsSubscription.unsubscribe();
  }
}

其次，确认箭头函数的使用（你已经做对了，但再核对下） #

你在订阅回调里用了箭头函数(items: any[]) => {...}，这已经帮你绑定了当前组件实例的this，所以如果是新组件实例的回调，this肯定指向当前组件的最新状态。如果还是有问题，那大概率不是箭头函数的锅，而是上面说的旧实例残留问题。

进阶优化：用Async管道代替手动订阅 #

Angular的async管道会自动帮你管理订阅的创建和销毁，完全避免手动订阅带来的内存泄漏和上下文问题，这也是Angular推荐的响应式编程方式。

改造步骤： #

1. 在组件类里把Observable赋值给一个类属性：

// 组件类中定义
myItems$ = this.dataService.myItemsChanged;

2. 在模板中用async管道订阅，并获取最新的items：

<!-- 模板中 -->
<div *ngIf="myItems$ | async as items">
  <!-- 这里可以直接使用最新的items数组 -->
</div>

3. 如果需要在组件类中处理逻辑，可以结合tap操作符：

import { tap } from 'rxjs/operators';

ngOnInit(): void {
  this.myItems$
    .pipe(
      tap((items: any[]) => {
        // 在这里处理你的业务逻辑，此时的this肯定是当前组件实例
        const lastItem = items[items.length - 1];
        if (lastItem.label.trim() === this.itemsForm.controls.label.value.trim()) {
          this.id = ...;
        }
      })
    )
    .subscribe();
}

最后，检查变更检测策略 #

如果你的组件用了ChangeDetectionStrategy.OnPush，当组件的输入属性没有变化时，Angular不会自动触发变更检测，可能导致组件状态和视图不同步，看起来像是this指向了旧数据。这种情况下，你可以手动触发变更检测：

1. 注入ChangeDetectorRef：

constructor(private cdr: ChangeDetectorRef) {}

2. 在订阅回调中更新状态后，手动触发变更检测：

ngOnInit(): void {
  this.myItemsSubscription = this.dataService.myItemsChanged
    .subscribe((items: any[]) => {
      const lastItem = items[items.length - 1];
      if (lastItem.label.trim() === this.itemsForm.controls.label.value.trim()) {
        this.id = ...;
        // 手动触发变更检测，同步组件状态到视图
        this.cdr.detectChanges();
      }
    });
}

先试试取消订阅的方案，这是最常见的原因。如果还是不行，再排查变更检测或者改用Async管道，应该就能解决你的问题了。

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