Angular DI完成后通过decorator执行组件函数的问题求助

这个问题我之前也碰到过，核心原因是装饰器的执行时机和Angular依赖注入（DI）的时机不匹配！

为什么会出现这个问题？ #

TypeScript装饰器是在类定义阶段就执行的，这时候Angular还没有创建组件实例，更没有完成依赖注入的过程。你在装饰器里直接调用this相关的函数时，this指向的要么是未初始化的类原型，要么根本不是最终的组件实例，自然拿不到translateService这类注入的服务。

而组件的constructor是在Angular创建实例、完成依赖注入之后才执行的，所以此时this上的服务已经准备就绪。

解决方案：利用Angular生命周期钩子延迟执行逻辑 #

最靠谱的方式是把需要访问注入服务的逻辑，延迟到Angular的生命周期钩子（比如ngOnInit）执行时。我们可以在装饰器里修改组件的生命周期钩子方法，把要执行的函数放到钩子中：

示例：类装饰器结合ngOnInit

// 自定义装饰器
function RunAfterDI() {
  return function (target: any) {
    // 保存组件原本的ngOnInit方法（如果有的话）
    const originalNgOnInit = target.prototype.ngOnInit;

    // 重写ngOnInit
    target.prototype.ngOnInit = function () {
      // 这里的this就是已经完成DI的组件实例
      this.executeAfterDI();

      // 如果组件原本有ngOnInit，记得调用原方法
      if (originalNgOnInit) {
        originalNgOnInit.call(this);
      }
    };
  };
}

然后在组件中使用这个装饰器，并定义需要执行的方法：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@RunAfterDI()
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  constructor(private translateService: TranslateService) {}

  // 这个方法会在DI完成后执行
  executeAfterDI() {
    console.log('当前语言：', this.translateService.currentLang);
    // 这里可以放心使用translateService
  }
}

如果是方法装饰器怎么办？

如果你是给某个方法加装饰器，想要让这个方法在DI完成后自动执行，同样可以借助生命周期钩子。比如：

function ExecuteAfterDI() {
  return function (target: any, propertyKey: string) {
    const originalNgOnInit = target.ngOnInit;
    target.ngOnInit = function () {
      // 调用被装饰的方法
      this[propertyKey]();
      originalNgOnInit?.call(this);
    };
  };
}

组件中使用：

@Component({...})
export class MyComponent {
  constructor(private translateService: TranslateService) {}

  @ExecuteAfterDI()
  myMethod() {
    console.log(this.translateService.currentLang);
  }
}

核心思路总结 #

装饰器本身的执行时机太早，赶不上DI的节奏，所以我们需要把依赖DI的逻辑“挂靠”到Angular提供的、确保DI完成的生命周期钩子上。ngOnInit是最常用的选择（它在组件实例创建、依赖注入完成后立即执行），你也可以根据需求选择ngAfterViewInit等其他钩子。

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