事件处理函数不能使用其他（辅助）函数

Question

我正在尝试使用 Cytoscape.js 和 Angular2+ 构建应用程序。核心部分发生在单个服务中 (cy.service)。我将所有事件监听器添加到一个函数中，并在 cy init 之后调用它。

例如：

initEventlisteners(){
  cy.on('tap', this.handler);
  cy.on(...);
  ...
}

handler(event: any){
 console.log('something');
}

如果我将 console.log 包装在这样的辅助函数中：

helper(){
 console.log('something');
)

并在处理函数中使用它

handler(event:any){
 this.helper();
}

它调用：helper() 不是函数。这是一个大问题，不能在处理程序中使用其他功能。有什么想法可以解决这个问题吗？

Answer 1

那是因为像这样的绑定 cy.on('tap', this.handler); 你正在失去变量的范围。您应该以这种方式使用它 cy.on('tap', (event) => { this.handler(event) }); （如果它传递任何 event 对象）或 cy.on('tap', this.handler.bind(this));.

() => { } 的第一种方法称为 arrow function，它保留变量的当前范围。这是 ES6 规范的新特性。但是您不必担心，angular 编译器会将其转换为向后兼容 ES5。

第二种方法 .bind(this) 只是简单地将此方法绑定到调用它的当前范围。

事件处理函数不能使用其他（辅助）函数

Eventhandler-function can't use other (helper)functions

javascript

angular

typescript

cytoscape.js