Angular 2 全局键盘检测

Question

我如何在使用Angular 2的RC5时，将键事件监听器绑定到文档而不是特定的输入字段呢？

例如：

我知道可以“将其绑定到元素”。

<input (keypress)="onKeyDown($event)" [(ngModel)]="something" type="text">

例如，我该如何将它绑定到文档上？

<div (keypress)="onKeyDown($event)"> <input /> ... </div>

- Emanuel Weinsjö

Answer 1

@HostListener('window:keydown', ['$event'])
onKeyDown(event) {
  ...
}

您也可以这样做。

<div (window:keypress)="onKeyDown($event)">

或者

<div (document)="onKeyDown($event)">

像声明式过滤一样的筛选

<div (window:keydown.alt.a)="onKeyDown($event)">

当前不支持全局监听器。

另请参见https://github.com/angular/angular/issues/7308

- Günter Zöchbauer

---

请问您能指导如何获取长按退格键的操作吗？ - Naveed Ahmed

是的，这个问题是由您回答的。我尝试将其移植到ts，但似乎一些功能仅在dart中可用，例如Duration、Timer等。 - Naveed Ahmed

在TS中，只需使用毫秒值的“number”而不是“Duration”。不要使用“new Timer()”，而是使用“setTimeout()”。 - Günter Zöchbauer

2020年的小更新，如答案中所述，声明式过滤器 <div (window:keydown.alt.a)="onKeyDown($event)"> 现在可以使用了。在同一个Github问题链接中，有一条评论于2016年11月24日关闭。下一个主要的Angular版本是在2017年3月23日发布的4.0.0，因此任何版本都应该可以使用。 - OSH

我选择在上面进行评论而不是编辑，因为我找不到可以引用的提交记录，也没有在Angular文档或任何发布说明中找到该功能的直接参考。我不确定Github问题评论是否足以证明这个编辑的合理性。 - OSH

Answer 2

你也可以使用rxjs进行这个操作。

fromEvent<KeyboardEvent>(document, 'keydown')
  .pipe(...)
  .subscribe()

请查看：https://www.learnrxjs.io/learn-rxjs/operators/creation/fromevent

- Zoltán Lehoczky

---

请考虑编辑您的问题，以包括解释您的答案如何回答该问题。 - JohnH