javascript - Typescript 和 JQuery 结合在一起

Question

我在使用 typescript 和 jquery 时遇到了一些问题。是的，我正在使用 Angular2。

我的代码如下所示:

这里我包含了 JQuery，这样我就可以在 ts 中使用它

let $ = require('/node_modules/jquery/dist/jquery.js');

在另一部分，我定义了一个这样的函数

public goBack() {
    console.log("HUHU");
    this.router.navigateByUrl('/dash/' + this.projectId);
}

到目前为止一切顺利...现在使用 JQuery 的部分不起作用:

$(document).ready(function() {
    $('.modal').modal('show');
});

$(document).keyup(function (e) {
    if (e.which == 27 && $('body').hasClass('modal-open')) {
        this.goBack();
    }
});

$(document).click(function (e) {
    if (e.target === $('.modal')[0] && $('body').hasClass('modal-open')) {
        this.goBack();
    }
});

我在这里做什么？我实际上在第一部分中使用 $('.modal').modal('show'); 打开 Bootstrap 模式(弹出窗口)，这甚至可以工作。但是其他两个部分，keyup 和 click 甚至处理也可以工作但是我不能使用this.goBack()。在这两部分中，我想捕获以下事件:

• 单击 ESC 并关闭模式
• 点击模态框(灰色区域)将其关闭

正如我所说，模式正在关闭，但 URL 没有更改，通过调用 this.goBack() 进行更改还有想法吗？

提前致谢!

亚德博

Answer 1

改变

$(document).keyup(function (e) {

和

$(document).click(function (e) {

至

$(document).keyup((e)=> {

和

$(document).click((e)=> {

如果您使用function你的this不会引用您的组件，而是引用 click 的实例和keyup事件。

箭头表示法是创建 js 闭包的简短版本:

var self = this;
$(document).keyup(function (e) {
    if (e.which == 27 && $('body').hasClass('modal-open')) {
        self.goBack();
    }
});

建议阅读:How to access the correct `this` inside a callback?