Question

我有一个处理所有dom操作的服务，名为DomService

我有另一个名为ModalService

的服务处理模式功能

在ModalService中，我绑定了一些事件，并从DomService作为侦听器给它一个方法，如下所示：

document.body.addEventListener('focus', this.domService.keyPress.bind(this), true);

然后keyPress看起来像：

keyPress(event){
    if (event.which === key.escape) {
        event.preventDefault();
        this.hide();
    }
}

它工作正常，问题是打字稿仍然会this作为对DomService类的引用，当它实际上绑定到ModalService类时，所以＆＃39 ;告诉我hide类型DomService上没有Uncaught TypeError: _this.props.setTextFilter is not a function at ExpListFilters._this.onTextChanged (ExpListFilters.js:17)属性

有什么办法可以让打字稿冷却下来吗？

Answer 1

您可以通过添加{及其类型）作为函数的第一个参数来更改任何函数中this的上下文。因此，要将this内keyPress的上下文更改为ModalService，您可以这样做：

keyPress(this: ModalService, event) {
    if (event.which === key.escape) {
        event.preventDefault();
        this.hide(); // Now is OK.
    }
}

您可以详细了解该功能here。

除此之外，如果上述解决方案不充分，您可以随时在任何行上方添加一行// @ts-ignore，从而产生错误以使其静音。

Answer 2

您可以使用EventEmitter并处理（订阅）“emit”事件。

<强> ModalService

this.subscriptionHide = this.domService.getHideEmitter()
  .subscribe(() => this.hide());

<强> DomService

hideEmitter: EventEmitter<any> = new EventEmitter();

keyPress(event){
    if (event.which === key.escape) {
        event.preventDefault();
        this.hideEmitter.emit(null);
    }
}

getHideEmitter() {
    return this.hideEmitter;
}

Answer 3

尝试将您的功能更改为箭头功能。

更改

keyPress(event) {

要

keyPress = (event) => {

您可以在打字稿here

中阅读有关箭头功能的内容

在事件处理程序中使用另一个类的方法并绑定当前类上下文时，typescript错误TS2339

3 个答案: