Angular组件销毁后，修改其状态的Promise为何不报错？

这个问题其实挺常见的，我来给你拆解一下背后的原因，顺便说说潜在的风险和解决办法：

1. 组件实例并没有立即消失 #

当你通过路由导航离开组件时，Angular会触发ngOnDestroy生命周期钩子，告诉你“这个组件要被销毁了”——但这只是执行清理逻辑的信号，组件的JS对象实例并不会马上被垃圾回收（GC）。

原因很简单：你的Promise回调函数通过this关键字持有了对组件实例的引用。只要还有引用指向这个对象，JavaScript引擎就不会回收它。所以10秒后Promise执行回调时，this依然指向完整的组件实例，修改它的属性自然不会抛出“Cannot set property of undefined”这类错误。

举个你代码的典型例子：

@Component({
  selector: 'app-my-component',
  template: '<p>{{ status }}</p>'
})
export class MyComponent implements OnDestroy {
  status = '初始状态';

  ngOnInit() {
    new Promise(resolve => {
      setTimeout(() => {
        this.status = 'Promise执行完成'; // 组件销毁后执行这里不会报错
        resolve();
      }, 10000);
    });
  }

  ngOnDestroy() {
    console.log('组件已销毁');
  }
}

2. Angular已经停止了对该组件的变更检测 #

即使你修改了组件的status属性，你也不会看到视图更新——因为Angular在组件销毁时，已经把它从变更检测树中移除了。没有了变更检测的触发，视图不会尝试和组件状态同步，也就不会出现像ExpressionChangedAfterItHasBeenCheckedError这类和变更检测相关的错误。

这就是为什么你既看不到视图更新，也没收到报错的核心原因：组件实例还活着，但Angular已经不再关心它的状态变化了。

3. 这里藏着内存泄漏的隐患 #

虽然没报错，但这种写法其实有内存泄漏的风险：组件实例会因为Promise回调的引用一直留在内存中，直到10秒后Promise执行完成，引用才会被释放，GC才能回收它。如果你的组件频繁被创建和销毁，或者Promise等待时间很长，就会积累不必要的内存占用。

如何解决？ #

最好的做法是在组件销毁时，跳过异步回调里的状态修改，或者直接取消异步操作：

方案1：用标志位控制 #

在ngOnDestroy中设置一个标志，回调里先检查标志再执行状态修改：

export class MyComponent implements OnDestroy {
  status = '初始状态';
  private isDestroyed = false;

  ngOnInit() {
    new Promise(resolve => {
      setTimeout(() => {
        if (!this.isDestroyed) { // 先判断组件是否已销毁
          this.status = 'Promise执行完成';
        }
        resolve();
      }, 10000);
    });
  }

  ngOnDestroy() {
    this.isDestroyed = true;
    console.log('组件已销毁');
  }
}

方案2：转用Observable（更推荐） #

如果可以把Promise转成Observable，就能用RxJS的操作符更优雅地管理异步操作的生命周期，比如takeUntil：

import { from, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class MyComponent implements OnDestroy {
  status = '初始状态';
  private destroy$ = new Subject<void>();

  ngOnInit() {
    // 将Promise转为Observable
    from(new Promise(resolve => setTimeout(resolve, 10000)))
      .pipe(takeUntil(this.destroy$)) // 组件销毁时自动取消订阅
      .subscribe(() => {
        this.status = 'Promise执行完成';
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    console.log('组件已销毁');
  }
}

这样一来，组件销毁时会立即切断Observable的订阅，不仅能避免无用的状态修改，还能及时释放组件实例的引用，防止内存泄漏。

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