Angular2创建全局键盘快捷键(又称热键)的方式是什么?

问题描述

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

What would be proper way of creating global keyboard shortcuts (a.k.a. hotkeys) in Angular2 application?

让我们说一个好的起点是开始工作:?"用于备忘单，用于提交表单的是"Alt + s".

Let's say good starting point would be to get working: "?" for cheat-sheet and "Alt+s" for submitting form.

我应该映射吗?"以某种方式对主要组件进行开发，然后开发出适用于应在特定热键上进行响应的组件的属性指令，但是，然后-如何防止输入字段对?"做出响应.

Should I map "?" somehow to main component and then develop attribute directive that would be applied to those components which should respond on particular hotkeys, but then - how do I prevent input fields from responding to "?".

推荐答案

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

You can use this syntax in your template

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

这篇关于Angular2创建全局键盘快捷键(又称热键)的方式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！