能否通过装饰器为Angular类添加ngOnDestroy？为何未触发？

嘿，这个问题我之前踩过坑，咱们慢慢捋清楚原因和解决办法～

首先得明白Angular是怎么识别生命周期钩子的：Angular（尤其是AOT编译模式下）是通过静态分析类的代码来确定生命周期钩子的，它会在编译阶段就把钩子的信息写入组件元数据里，而不是在运行时动态扫描原型或实例的属性。这就意味着，你在运行时（哪怕是装饰器里）动态添加的钩子方法，Angular根本“看不见”，自然不会去调用它。

咱们再拆解你试的两种方法的问题：

方法1：给target赋值 #

你写的方法装饰器里的target其实是类的原型对象，当你给target.ngOnDestroy赋值时，确实会在原型上添加这个方法，但问题在于：

• 如果是AOT编译，Angular在编译时只看你写在类里的代码，不会管原型上后来加的方法，所以完全不会识别这个钩子。
• 就算是JIT模式，Angular的钩子检测逻辑也优先依赖编译生成的元数据，而不是动态添加的原型方法，所以大概率还是不会触发。

方法2：用this赋值 #

这个是典型的装饰器执行时机误区！方法装饰器是在类定义的时候就执行的，这时候还没有任何类的实例被创建，所以装饰器函数里的this指向的是全局对象（浏览器里就是window），你其实是给window加了个ngOnDestroy，跟你的X类半毛钱关系都没有，当然不会触发啦 😂

要让Angular识别到你添加的ngOnDestroy，得用类装饰器，并且在类的原型上添加方法（同时保留原有钩子的逻辑，避免覆盖）。示例代码如下：

// 定义一个类装饰器，用来添加ngOnDestroy钩子
function AddNgOnDestroy() {
  return function (target: any) {
    // 先保存原来的ngOnDestroy方法（如果类本身已经定义了）
    const originalNgOnDestroy = target.prototype.ngOnDestroy;

    // 重写原型上的ngOnDestroy
    target.prototype.ngOnDestroy = function () {
      // 这里写你自定义的销毁逻辑
      console.log('自定义的ngOnDestroy触发啦！');
      
      // 如果原来有ngOnDestroy，记得调用它，避免覆盖原有逻辑
      if (originalNgOnDestroy) {
        originalNgOnDestroy.call(this);
      }
    };
  };
}

// 给你的类加上这个装饰器（注意装饰器执行顺序：离类越近越先执行，所以要放在@Component/@Directive下方）
@Component({/* 组件配置 */})
@AddNgOnDestroy()
class X {
  someMethod() {}
}

另外还要注意：你的X类必须是Angular管理的组件/指令（带有@Component或@Directive装饰器），如果只是普通的JS/TS类，Angular根本不会去触发它的生命周期钩子哦。

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