Aurelia：@autoinject 不注入元素

Question

我的自定义属性中的 @autoinject() 装饰器有一些奇怪的行为。

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

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

该类使用@autionject() 进行装饰，而translationService 和eventAggregator 参数被正确注入，element 参数填充的对象肯定不是元素。

元素如下所示：

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

当我使用@inject(Element, TranslationService, EventAggregator) 而不是@autoinject() 时，元素被正确注入。

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

Answer 1

你得到的是一个 jquery 包装的元素（例如，如果你调用 $(el)，你会得到什么），所以 TypeScript 可能会以某种方式发出错误的类型元数据。

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

与此同时，当您使用 @autoinject() 并搜索与您的自定义属性相关联的“design:paramTypes”时，请查看您的应用发出的 .js。它应该看起来像这样：

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

然后切换到@inject(Element)，构建并做同样的事情。你应该会发现这样的东西：

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

查看传递给aureliaDependencyInjection.inject(..)的Element对象是否与传递给__metadata("design:paramtypes", ..)的对象不同

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