Aurelia框架@autoinject装饰器无法正确注入Element求助

我来帮你拆解这个Aurelia框架下的依赖注入问题：

问题核心 #

当使用@autoinject()装饰器时，框架的自动依赖解析器错误地把Element参数解析成了jQuery包装后的对象，而非原生DOM Element；但改用显式的@inject(Element, TranslationService, EventAggregator)时，因为明确指定了依赖令牌，就能正确注入目标对象。

原因推测 #

@autoinject()是靠TypeScript的类型元数据自动推断依赖的。如果你的项目引入了jQuery，全局环境中的类型定义可能和框架提供的Element类型产生冲突——jQuery的类型系统可能会扩展或覆盖全局Element类型，导致自动解析器误判，注入了jQuery包装后的DOM对象（也就是你看到的带jQuery3210xxx属性的对象）。

而@inject()是显式指定依赖令牌，直接告诉框架要注入的具体依赖，完全绕开了类型推断环节，所以不会出现歧义。

解决方案 #

方案1：继续使用显式@inject（推荐） #

这是最稳妥的方式，彻底避免类型推断的不确定性，代码也更清晰：

import { inject, Element } from 'aurelia-framework';
import { TranslationService } from './your-service-path';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(Element, TranslationService, EventAggregator)
export class YourComponent {
  constructor(element: Element, translationService: TranslationService, eventAggregator: EventAggregator) {
    console.log(element); // 现在会是正确的原生DOM Element
    console.log(translationService);
    console.log(eventAggregator);
  }
}

方案2：修复@autoinject的类型推断 #

如果坚持要用@autoinject()，可以尝试以下调整：

• 明确导入框架提供的Element类型，避免使用全局类型：

  import { autoinject, Element } from 'aurelia-framework';
  

• 若存在jQuery类型冲突，给框架的Element起别名区分：

  import { autoinject, Element as AureliaElement } from 'aurelia-framework';
  
  @autoinject()
  export class YourComponent {
    constructor(element: AureliaElement, translationService: TranslationService, eventAggregator: EventAggregator) {
      // 逻辑代码
    }
  }
  

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