Typescript 如何在整个页面上侦听按键事件？

我正在寻找一种将函数绑定到整个页面的方法（当用户按下某个键时，我希望它触发component.ts中的函数）

在AngularJS中，使用

ng按键

很容易，但它不适用于

（按键）=“handleInput（$event）”

我试着在整个页面上使用div包装器，但似乎不起作用。 只有当焦点集中在它上面时，它才起作用

我会在组件中使用decorator：

从'@angular/core'导入{HostListener}；
@组成部分({
...
})
导出类AppComponent{
@HostListener（'文档：按键'，['$event']））
handleKeyboardEvent（事件：KeyboardEvent）{
this.key=event.key；
}
}

还有其他选择，如：

组件内的主机属性@装饰器

Angular建议在主机属性上使用

@HostListener

装饰器

@组件({
...
主持人:{
“（文档：keypress）:‘handleKeyboardEvent（$event）’”
}
})
导出类AppComponent{
handleKeyboardEvent（事件：KeyboardEvent）{
console.log（事件）；
}
}

渲染器。请听

从'@angular/core'导入{Component，Renderer2}；
@组成部分({
...
})
导出类AppComponent{
globalListenFunc：函数；
构造函数（私有呈现器：Renderer2）{}
恩戈尼尼特（）{
this.globalListenFunc=this.renderer.listen（'document'，'keypress'，e=>{
控制台日志（e）；
});
}
恩贡德斯特罗（）{
//删除侦听器
this.globalListenFunc（）；
}
}

可观察到。fromEvent

从'rxjs/Observable'导入{Observable}；
导入“rxjs/add/observable/fromEvent”；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
...
})
导出类AppComponent{
认购：认购；
恩戈尼尼特（）{
this.subscription=Observable.fromEvent（文档'keypress'）。subscription（e=>{
控制台日志（e）；
})
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
}

yurzui的回答对我不起作用，可能是不同的RC版本，也可能是我的错误。不管是哪种方式，下面是我如何使用Angular2 RC4中的组件（它现在已经过时了）完成的

---

如果您想在任何特定的键盘按钮上执行任何事件，在这种情况下，您可以使用@HostListener。为此，必须在组件ts文件中导入HostListener

从'@angular/core'导入{HostListener}
然后在组件ts文件中的任意位置使用下面的函数

@HostListener('document:keyup', ['$event'])
  handleDeleteKeyboardEvent(event: KeyboardEvent) {
    if(event.key === 'Delete')
    {
      // remove something...
    }
  }

---

再加上2019年w.8

我不用按键，而是用了按键

@HostListener('document:keypress', ['$event'])

到

工作

注意“文档：按键”已被弃用。我们应该使用document:keydown

---

链接：

我认为这是最好的

例如在app.component中

constructor(private eventManager: EventManager) {
    const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
      'document',
      'keypress',
      (ev) => {
        console.log('ev', ev);
      }
    );
  }

---

这是一样的，只是另一种语法，你使用了

keydown

而不是像我说的

keypress

，这可能是我的错误，但这就是让它为我工作的原因。：）与使用document.addEventListener相比，这有什么好处？这仅仅是一个抽象DOM的问题吗？@Ixonal#2在这篇文章中的描述比我能描述的要好：基本上，它不是“角度”方式，因为它与浏览器耦合，并且不可测试。现在可能没什么大不了的，但这是一个值得效仿的好模式。最新的文档建议使用@HostListener:Werking fine。必须添加从“@angular/core”导入的{HostListener}。甚至可以调用组件中的任意位置。即使是外部控制器也能正常工作感谢这一点，但这只是对未来读者的提醒：如果您需要箭头键，请使用向下键而不是按键。如果您需要

esc

键，请使用

keyup

事件。感谢@TroelsLarsen@yurzui，如何将此事件用于特定组件。而不是整个组件page@yurzui如何检测

功能键

（F1、F2、F3等）？您是否尝试过

窗口：按键

？角度9报告：按键和向下键都会注册正常的“asdf”键，但只有向下键会获得F4和其他功能键。Keypress可以得到一些组合键，比如CTRL-Z，keydown分别解释这些组合键（一个CTRL键，然后是毫秒后的Z键）。

@HostListener('document:keydown', ['$event'])

constructor(private eventManager: EventManager) {
    const removeGlobalEventListener = this.eventManager.addGlobalEventListener(
      'document',
      'keypress',
      (ev) => {
        console.log('ev', ev);
      }
    );
  }