Angular 12中ngOnDestroy生命周期内this变为undefined问题

该报错是ngOnDestroy生命周期方法的执行上下文丢失导致：运行时函数内部的this没有绑定到当前组件实例，严格模式下无明确绑定的普通函数this值为undefined，因此访问this.subscription触发属性读取错误。
最常见的触发场景是你在代码中将ngOnDestroy作为回调函数直接传递给了异步逻辑（比如Promise、事件监听、第三方库回调），未绑定组件上下文。

// 典型错误写法示例
somePromise.then(this.ngOnDestroy) // 直接传递函数引用，执行时this丢失
element.addEventListener('customEvent', this.ngOnDestroy)

方案1：传递回调时绑定上下文 #

传递ngOnDestroy作为回调时，通过bind绑定this，或用箭头函数包裹保留上下文：

// 写法1：bind绑定
somePromise.then(this.ngOnDestroy.bind(this))
// 写法2：箭头函数包裹（更推荐，可读性更高）
somePromise.then(() => this.ngOnDestroy())

方案2：将ngOnDestroy声明为箭头函数 #

直接将生命周期方法定义为类箭头函数，永久绑定组件实例的this，无需额外处理上下文：

ngOnDestroy = () => {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

Angular 12完全兼容该写法，不会影响生命周期的正常触发

方案3：更稳妥的RxJS订阅管理方案（推荐） #

不用手动维护单个subscription实例，通过takeUntil操作符统一管理所有订阅的销毁逻辑，从根源减少上下文绑定问题的影响：

1. 组件内定义销毁主题

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

// 组件类属性
private destroy$ = new Subject<void>();

2. 所有订阅添加takeUntil算子

this.yourObservable.pipe(
  takeUntil(this.destroy$)
).subscribe(/* 你的业务回调逻辑 */)

3. ngOnDestroy中触发销毁信号

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

该方案可以一次性销毁组件内所有添加了takeUntil(this.destroy$)的订阅，不需要单独维护每个subscription变量。

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