Javascript Aurelia:@autoinject不注入元素

我的自定义属性中的

@autoinject（）

装饰器有一些奇怪的特性

该属性的构造函数如下所示：

constructor(element: Element,translationService: TranslationService, eventAggregator: EventAggregator){
    console.log(element);
    console.log(translationService);
    console.log(eventAggregator);
    ...
}

{
    jQuery321051167339178565241 : {events: {…}, handle: ƒ}
    __proto__: Object
}

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.autoinject(),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.inject(Element),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

该类用

@autionject（）

修饰，而参数

translationService

和

eventAggregator

被正确注入

元素

参数被一个对象填充，该对象肯定不是元素

元素如下所示：

constructor(element: Element,translationService: TranslationService, eventAggregator: EventAggregator){
    console.log(element);
    console.log(translationService);
    console.log(eventAggregator);
    ...
}

{
    jQuery321051167339178565241 : {events: {…}, handle: ƒ}
    __proto__: Object
}

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.autoinject(),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.inject(Element),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

当我使用

@inject（Element、TranslationService、EventAggregator）

而不是

@autoinject（）

时，元素被正确注入

---

有人猜测出了什么问题吗？

您得到的是一个jquery包装的元素（例如，如果调用

$（el）

），那么可能TypeScript以某种方式发出了错误的类型元数据

为了能够解决这个问题，您需要包括您的typescript版本、tsconfig、构建配置和Aurelia版本

同时，当您使用

@autoinject（）

并搜索绑定到自定义属性的“design:paramTypes”时，请查看应用程序发出的

.js

。它应该是这样的：

constructor(element: Element,translationService: TranslationService, eventAggregator: EventAggregator){
    console.log(element);
    console.log(translationService);
    console.log(eventAggregator);
    ...
}

{
    jQuery321051167339178565241 : {events: {…}, handle: ƒ}
    __proto__: Object
}

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.autoinject(),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.inject(Element),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

然后切换到

@inject（Element）

，构建并执行相同的操作。您应该找到如下内容：

constructor(element: Element,translationService: TranslationService, eventAggregator: EventAggregator){
    console.log(element);
    console.log(translationService);
    console.log(eventAggregator);
    ...
}

{
    jQuery321051167339178565241 : {events: {…}, handle: ƒ}
    __proto__: Object
}

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.autoinject(),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

exports.MyCustomAttribute = __decorate([
    aureliaDependencyInjection.inject(Element),
    __metadata("design:paramtypes", [Element])
], exports.MyCustomAttribute);

查看传递给

aureliaDependencyInjection.Injection（…）

的

元素

对象是否与传递给

的元数据（“design:paramtypes”，…）

这将有助于排除TypeScript是否确实发出了错误的元数据，或者是否出现了其他问题。

相关：