Angular2 创建全局键盘快捷键（又名热键）的方法是什么？答案

【问题标题】：What is Angular2 way of creating global keyboard shortcuts (a.k.a. hotkeys)?Angular2 创建全局键盘快捷键（又名热键）的方法是什么？
【发布时间】：2020-11-20 20:29:10
【问题描述】：

在 Angular2 应用程序中创建全局键盘快捷键（又名热键）的正确方法是什么？

假设好的起点是开始工作：“？”用于备忘单和“Alt+s”用于提交表单。

我应该映射“？”以某种方式应用于主要组件，然后开发将应用于那些应该响应特定热键的组件的属性指令，但是 - 我如何防止输入字段响应“？”。

【问题讨论】：

标签： angular

【解决方案1】：

您可以在模板中使用此语法

<div (window:keydown)="doSomething($event)">click me<div>

在你的组件中调用这个方法

doSomething($event) {
  // read keyCode or other properties 
  // from event and execute a command
}

监听宿主组件本身

@Component({
  selector: 'app-component',
  host: { '(window:keydown)': 'doSomething($event)' },
})
class AppComponent { 
  doSomething($event) {
    ...
  }
}

或通过这种等效的语法

@Component({
  selector: 'app-component',
})
class AppComponent { 
  @HostListener('window:keydown', ['$event'])
  doSomething($event) {
    ...
  }
}

【讨论】：

似乎 ? 不支持 '(window:keydown.?)`。可能只有github.com/angular/angular/blob/…中列出的代码
在我的键盘上“？”实际上是"Shift+/"，(window:keydown) 分别捕获它们。
我不知道你最后的评论是什么。这是一个问题还是一个澄清，...？
这是我的澄清尝试：输入“？” windows:keydown 事件在我的测试示例中触发了 2 个键：16（用于 shift）和 191（必须用于“？”）。因此看起来像“？”支持。
@GünterZöchbauer 如何确定这是一个全局事件而不是常规输入事件？例如。我有一个表单或独立输入，如果用户在那里输入，我仍然会得到全局事件。

【解决方案2】：

你可以使用我创建的名为angular2-hotkeys的库

它可以让你像这样创建热键：

constructor(private _hotkeysService: HotkeysService) {
  this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent) => {
    console.log('Typed hotkey');
    return false; // Prevent bubbling
}));  }

【讨论】：

我尝试了该库，但是在构建时出现语义错误，例如... node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(11,110)：错误 TS2304：找不到名称“ExtendedKeyboardEvent”。 ...等等。
您可以按照此 github 问题中的指南进行修复：github.com/brtnshrdr/angular2-hotkeys/issues/7
您能否提交包含更多信息的问题？谢谢！ github.com/brtnshrdr/angular2-hotkeys/issues
效果很好。但是我是否也可以将所有热键放在角度服务中，还是必须在 @NickRichardson 模块中？

【解决方案3】：

一个简单而优雅的解决方案如下所示：-

创建一个全局服务，它将存储快捷方式与可点击元素的绑定。注意：- 使用 NgOnDestroy，用于删除组件上的绑定被破坏。

现在创建一个指令，它将像这样将键码作为输入。

<button [angularHotKey]="[17,78]">New Document</button>
<!-- CTRL = 17 & n = 78 -->

现在，在您的最根组件中，侦听按键并将它们用作在热键的全局服务中定位元素的索引。现在在获得参考时做这样的事情。

我假设您已将录制的键码格式化为这种格式 = 1-23-32-... ，不要忘记按升序/降序对它们进行排序，将其添加到服务中的密钥对数组和检查时

if(this.keypair[combo].length)this.keypair[combo].click();

this.keypair[combo] 包含添加了angularHotKey directive 的元素的引用。

补充说明： 1.) 在angularHotKey 指令中添加新的密钥对和元素/可点击引用请检查是否不存在与相同组合的配对，如果是则抛出异常，这将有助于调试，并防止您犯下愚蠢的错误，并且在 Angular 2 组件类中，在 ngOnDestroy 方法中定义了删除与其子元素配对的所有快捷方式的逻辑。

访问http://keycode.info/ 获取键盘上所有类型键的键码。

JavaScript multiple keys pressed at once关于如何处理组合按键的每一个小细节的答案

【讨论】：