javascript - 如何注销 ipcRenderer.on 事件监听器？

Question

在我的主机应用程序中，我有一个按钮，单击该按钮后，会将数据连同数据一起发送到我的 Angular 应用程序。像这样:

<button (click)="onClick()">Send Some Data</button>

组件:

onClick() {  
ipcRenderer.send("data-bridge",{name: 'John Smith', address: 'Main Street', date: new Date() );
}

在我的 Angular 应用程序中，我正在接收这样的数据:

import { ElectronService } from 'ngx-electron';

export class AppComponent {
  constructor( private electronService: ElectronService) {}

   ngOnInit() {
    if (this.electronService.ipcRenderer) {

      this.electronService.ipcRenderer.on('data-bridge', (event, data) => {
            console.log('got something', data)
        })
    }
  }
}

我注意到的行为是，我点击按钮 x 次，我会看到 x 次警报:

• 1 次点击 --> 1 次提醒
• 2 次点击 --> 2 次提醒
• 点击 3 次 --> 提醒 3 次等等

所以这显然向我表明存在内存泄漏。解决方法很简单，在接收到事件后移除事件监听器。

我试过做类似的事情:

this.electronService.ipcRenderer.on('data-bridge', (event, data) => {
        alert('got something');
        this.electronService.ipcRenderer.removeAllListeners()
}

但是多次警报仍然会在单击一次时发生。

我不能使用 ipcRenderer.once 方法，因为我需要监听器保持打开状态，只是不能有多个相同的监听器。如何删除 ipcRenderer.on('data-bridge', ...) 事件监听器，以便每次单击按钮时，我都只有一个事件监听器？

Answer 1

ipcRenderer 是一个 EventEmitter类，所以你有 removeListener(eventName, listener)(或 off)方法。

这应该有效

// on construct
this.onData = (event, data) => {
  console.log('got something', data)
})
// on init
ipcRenderer.on('data-bridge', this.onData)
// on deconstruct
ipcRenderer.removeListener('data-bridge', this.onData)