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)作为箭头函数参数。它给了我一个编译错误。

OR

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

Answer 1

＆＃34;问题＆＃34;是箭头功能。实际上不是问题，但它是一个功能。使用箭头函数，您不会改变this的上下文，正常函数的作用如何。因此，如果要使用箭头函数，请通过选择器再次选择元素，因为您无法使用内部的$(this)。否则（更好）您可以通过jQuery访问event.currentTarget，如您所述。但是，如果您的组件与相同的输入字段相关联，那么您应该能够通过$element引用（更好的方式）使用angular来访问它

这是使用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
});

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

1 个答案: