如何将事件处理程序绑定到打字稿中的类方法？

Question

我使用打字稿编写应用程序。并将其编译为js，除了事件绑定部分外，它运行良好。 _stateService 是我注入到这个类中的一个类。

下面的类是尝试使用jQuery创建一个DOM元素，然后将其传递给另一个类进行渲染，创建部分运行良好，最终呈现在页面上。但是事件绑定有点棘手。

一开始想用$().click()来绑定，但是因为元素还没有渲染失败。

然后我尝试使用 $().on() 进行绑定，它可以工作。但在运行时，它会抛出一个错误：

TemplatingService.ts:37 未捕获类型错误：无法读取属性 未定义的“回调”（匿名函数）@ TemplatingService.ts:37dispatch@jquery.min.js:3q.handle@ jquery.min.js:3

看来，如果我只是在该绑定函数中使用 console.log("test")，它就可以工作。但是如果我尝试将它绑定到一个类方法，它就会失败。似乎失去了上下文，我该如何解决这个问题？

原来的打字稿是：

export class TemplatingService implements ITemplatingService {
    _stateService: IStateService;

    constructor(stateService: IStateService) {
        this._stateService = stateService;
    }

    createPage(page:IPage):JQuery{
        let outerDiv = this.createLayout();
        for (let element of page.rawLayout){
            switch(element.type){
                case "button":
                    let temp = this.createJQueryButton();
                    $(".emulator").on('click', "#"+element.name, function(){
                                   this._stateService.CallBack(element);
                    });
                    outerDiv.append(temp);
                    break;
            }
        }
        return outerDiv;
    }
}

相关的生成js如下：

"use strict";
var TemplatingService = (function () {
    function TemplatingService(stateService) {
        this._stateService = stateService;
    }

    TemplatingService.prototype.createPage = function (page) {
        var outerDiv = this.createLayout();
        var _loop_1 = function(element1) {
            switch (element.type) {
                case "button":
                    var temp = this_1.createjQueryButton();
                    $(".emulator").on('click', "#" + element.name, function () {
                        this._stateService.CallBack(element);
                    });
                    outerDiv.append(temp);
                    break;
            }
        };
        var this_1 = this;
       for (var _a = 0, _b = page.rawLayout; _a < _b.length; _a++) {
            var element1 = _b[_a];
            _loop_1(element1);
        }
        return outerDiv;

}());

exports.TemplatingService = TemplatingService;
//# sourceMappingURL=TemplatingService.js.map

Answer 1

问题确实是您传递给.on 的函数有自己的this 上下文。对于普通的 ES5，你可以使用 .bind(this) 或 var self = this; 来“修复”this 上下文，但是对于 TypeScript 和 ES6，你也可以使用箭头函数：

export class TemplatingService implements ITemplatingService {
    _stateService: IStateService;

    constructor(stateService: IStateService) {
        this._stateService = stateService;
    }

    createPage(page:IPage):JQuery{
        let outerDiv = this.createLayout();
        for (let element of page.rawLayout){
            switch(element.type){
                case "button":
                    let temp = this.createJQueryButton();
                    $(".emulator").on('click', "#"+element.name, () => { // <<< arrow!
                                   this._stateService.CallBack(element);
                    });
                    outerDiv.append(temp);
                    break;
            }
        }
        return outerDiv;
    }
}

Answer 2

回调需要绑定this。

 $(".emulator").on('click', "#"+element.name, function(){
     this._stateService.CallBack(element);
 }.bind(this));

或者更好的解决方案是将this 保存到变量中

createPage(page:IPage):JQuery{
    const self = this;
    let outerDiv = this.createLayout();
    for (let element of page.rawLayout){
        switch(element.type){
            case "button":
                let temp = this.createJQueryButton();
                $(".emulator").on('click', "#"+element.name, function(){
                     self._stateService.CallBack(element);
                });
                outerDiv.append(temp);
                break;
        }
    }
    return outerDiv;
}