javascript - 将当前 JQuery 对象传递给 TypeScript 箭头函数

Question

我在 Angular 组件的 ngOnInit 中编写了一个 JQuery 代码片段。其目的是在模板 html 中选择文件时触发方法。

以下 JQuery 已在 ngOnInit 中编写。请注意，它使用箭头函数。

$(document.body).on("change.bs.fileinput", ".fileinput-exists", () => {
    alert("fired");
    // do file upload stuff
    // for that, access the current input field and get the uploaded file
});

为了处理该文件，我需要访问它。为此，我需要在箭头函数中访问当前输入字段。

怎样才能通过呢？我尝试使用 $(this) 作为箭头函数参数。它给了我一个编译错误。

或者

我应该通过该事件吗？ (event : EventTarget) 作为箭头函数参数。

Answer 1

“问题”与箭头函数有关。实际上这不是问题，而是一个功能。使用箭头函数，您不会像普通函数那样更改 this 的上下文。 所以如果你想使用箭头功能，请通过选择器再次选择元素，因为你无法使用里面的 $(this) 。 否则(更好)您可以通过 jQuery 访问 event.currentTarget，如您所述。 但是，如果您的组件与相同的输入字段关联，您应该能够仅使用 Angular 通过 $element 引用来访问它(这样更好)

这里是使用 event.currentTarget 的示例:

$(document.body).on("change.bs.fileinput", ".fileinput-exists", (event) => {
    alert($(event.currentTarget));
    // do file upload stuff
    // for that, access the current input field and get the uploaded file
});