Angular：为什么 'keydown' 事件侦听器会触发多次？

Question

我在 Angular 应用程序的组件构造函数中声明的事件侦听器中有以下代码：

window.addEventListener('keydown, event => { console.log('key pressed'); });

只要我在组件存在时按下任意键，就会触发此事件。问题是它触发了 6 次而不是一次。

我想知道的：

1) 为什么会多次触发？

2) 如何让它只触发一次？

Answer 1

不能肯定地说，但问题看起来是每次此组件实例化时您都在手动注册一个事件侦听器并且从不清除它，并且您正在创建一个内存泄漏，侦听器和组件永远不会被销毁适当地。这就是为什么您不想手动执行此类操作并应该让 angular 为您处理的部分原因：

@HostListener('window:keydown', [])
onWindowKeyDown() {
  console.log('keydown')
}

现在 angular 将处理注册/注销您的听众。

Angular: why does 'keydown' event listener fire multiple times?