Angular2如何创建全局键盘快捷键（也称为热键）？

Question

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

假设起点是让“？”成为提示表并使“Alt + s”提交表单。

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

- Andris Krauze

Answer 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) {
    ...
  }
}

- Günter Zöchbauer

---

似乎 (window:keydown.?) 不支持 ?。可能只支持在 https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart 中列出的代码。 - Günter Zöchbauer

在我的键盘上，“？”实际上是“Shift+/”，而(window:keydown)会分别捕获它们。 - Andris Krauze

这是我的澄清尝试：通过键入“？”触发了windows:keydown事件，在我的测试示例中触发了2个键：16（用于shift）和191（必须是“？”）。因此，似乎支持“？”。 - Andris Krauze

@Dimanoid 谢谢提示。它一直是 HostListener，我只是犯了个错误。 - Günter Zöchbauer

@GünterZöchbauer，如何确定这是全局事件而不是常规输入事件？例如，如果我有一个表单或独立的输入框，用户在那里输入时，我仍然会收到全局事件。 - Zlatko

Answer 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
}));  }

- Nick Richardson

---

我尝试使用这个库，但是在构建时出现了语义错误，例如：... node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(11,110): error TS2304: Cannot find name 'ExtendedKeyboardEvent'...等等。 - ng-flo

您可以通过遵循此 GitHub 问题中的指南来修复它：https://github.com/brtnshrdr/angular2-hotkeys/issues/7 - Nick Richardson

你能提供更多信息提交一个问题吗？谢谢！https://github.com/brtnshrdr/angular2-hotkeys/issues - Nick Richardson

工作得很好。但是我是否也可以将所有的热键放在一个Angular服务中，或者必须在一个模块内@NickRichardson？ - Heribert

Answer 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指令 的元素的引用。

更多注意事项： 1.) 在 angularHotKey 指令中添加新的键值对和元素/可点击的引用时，请检查是否存在与相同组合的配对，如果有，请抛出异常。这将有助于调试，并防止您犯愚蠢的错误。在 Angular 2 组件类中，在 ngOnDestroy 方法中定义一个逻辑来删除所有与其子元素配对的快捷键。

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

JavaScript多个键同时按下 一个包含有关如何处理组合键按下的每一个细节的答案。

- Ravinder Payal