aurelia - 如何删除 Aurelia 中的事件监听器？

Question

如何删除 Aurelia 中的事件监听器？

这似乎没有做任何事情:

detached(){
  window.removeEventListener('scroll', this.windowScroll);
}

当我更改路线时，该事件仍在触发。

我将其附加到我的 View 模型文件的 constructor() 中:

window.addEventListener('scroll', this.windowScroll.bind(this));

我还尝试了 deactivate()，但当我更改路线时都没有触发。

Answer 1

这里至少有一个，但也可能有两个问题。

设置事件监听器

如果您无法使用 Aurelia 绑定(bind)进行事件委托(delegate)(滚动可能是也可能不是，我还没有尝试过)，那么您应该使用附加的生命周期回调来设置事件处理程序， 不是构造函数。原因是，除非您指定 View 模型是 transient 的，否则构造函数将被调用一次。相反，您确实希望 Aurelia 在每次附加时打开事件处理程序。

attached = () => {
    window.addEventListener('scroll', this.onScroll);
}

如何编写生命周期回调

一般来说，您应该使用箭头表示法编写生命周期回调。这是因为，IIRC，您的 this 可能会在激活生命周期期间重新分配。 TypeScript/ES6 中的箭头表示法将在词法上保留您的 this，即，它就是您所期望的。

detached = () => { 
    window.removeEventListener('scroll', this.onScroll);
}