如何避免Angular 11中硬编码的@HostListener事件？

上下文

在Angular应用程序中为某个键盘事件实现HostListeners后，我遇到了一个问题，即一些用户可能无法方便地放置键。例如，英文QWERTY键盘在右shift按钮旁边有“/”符号。另一方面，德国“Qwerzi”键盘在数字行中的“`”旁边有“/”，需要两个修改键才能执行。我们的目标是通过允许某些键盘快捷键来提高可用性，但在本例中，对于德语键盘，情况正好相反

目标

我的目标是在特定的应用程序配置类中指定某些热键组合。这应该不会太难执行。然后，用户可以自己配置热键

问题

目前，我对某个热键的实现如下所示

@HostListener('window.keydown.esc') escapeEvent(): void {
...
}

正如您所看到的，@HostListener注释需要一个参数来侦听某个事件。这样做的缺点是，它不能静态设置。例如，我不能定义变量并将其插入此参数。我得到的错误如下

@HostListener's event name argument must be a string. Value could not be determined statically

为了在设置文件中配置这些热键并改善用户体验和可用性，我如何避免这种情况

---

事先谢谢

您可以使用static关键字创建单独的类文件并声明静态属性

export class HostListenerKeys {
  static key = 'window.keydown.esc'
}

然后在组件内部，您可以像这样引用它：

组件。ts

@HostListener(HostListenerKeys.key) escapeEvent(): void {

}