Javascript 角度：许多组件监听关键事件-重构？

在我的几个角度分量中，我听关键事件

@HostListener('window:keydown', ['$event']) keyInput(event: KeyboardEvent) {
   if (this.isActive) {
      if (event.keyCode === 27) {
         // do something
      }
   }
 }

在这种情况下，这只是一个关键，但我有他们与更多

---

无论如何，我在我的项目中看到了重复的代码。那么，这是可以接受的还是我应该重构它？如果是这样，首选的方式是什么？

我会创建一个服务，其他组件可以在事件发生时订阅该服务。例如：

@Injectable（）
公共类KeyEventService{
私钥关闭$：可观察；
构造函数（）{
this.keydown$=可观察的.fromEvent（窗口，“keydown”）；
}
公共getEscapeKeyListener（）{
返回此.keydown$.filter（（事件：KeyboardEvent）=>event.keyCode==27）；
}
}

这允许您为事件设置一次侦听器，然后将其过滤到相应的按键。公共方法返回对特定键或多个键进行过滤的观察值，而无需设置新的观察值。然后，在您的组件中，您可以这样使用它：

@组件（{}）
公共类MyComponent实现OnInit、OnDestroy{
私钥监听器sub：订阅；
构造函数（私有keyEventSvc:KeyEventService）{}
恩戈尼尼特（）{
this.keyListenerSub=this.keyEventSvc.getEscapeKeyListener（）.subscribe（（）=>{
/*回应按键*/
});
}
恩贡德斯特罗（）{
this.keyListenerSub.unsubscribe（）；
}
}

---

这允许您只设置一次侦听器，然后在您的组件中，您可以在需要的事件发生时采取适当的操作。

Thnx，听起来是一个非常可靠的解决方案