什么是Angular2创建全局键盘快捷键(又名热键)的方法？

Question

在Angular2应用程序中创建全局键盘快捷键(也就是热键)的正确方法是什么？

让我们说好的起点就是开始工作:"？" 用于备忘单和"Alt + s"用于提交表格.

我应该映射"？" 不知何故,主要组件,然后开发属性指令,将应用于那些应该响应特定热键的组件,但是 - 如何防止输入字段响应"？".

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

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