如何监听整个页面上的按键事件？

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

它很容易在 AngularJS 与 ng-keypress，但它不与 (keypress)="handleInput($event)"工作。

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

<div (keypress)="handleInput($event)" tabindex="1">
157366 次浏览
小开
最佳答案

我会在您的组件中使用 < strong >@HostListener 装饰器:

import { HostListener } from '@angular/core';


@Component({
...
})
export class AppComponent {


@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
this.key = event.key;
}
}

还有其他选择，比如:

在 @Component装饰器中主机属性

Angular 建议在宿主属性 https://angular.io/guide/styleguide#style-06-03之上使用 @HostListener修饰符

@Component({
...
host: {
'(document:keypress)': 'handleKeyboardEvent($event)'
}
})
export class AppComponent {
handleKeyboardEvent(event: KeyboardEvent) {
console.log(event);
}
}

渲染者，听着

import { Component, Renderer2 } from '@angular/core';


@Component({
...
})
export class AppComponent {
globalListenFunc: Function;


constructor(private renderer: Renderer2) {}


ngOnInit() {
this.globalListenFunc = this.renderer.listen('document', 'keypress', e => {
console.log(e);
});
}


ngOnDestroy() {
// remove listener
this.globalListenFunc();
}
}

可观察

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';


@Component({
...
})
export class AppComponent {
subscription: Subscription;


ngOnInit() {
this.subscription = Observable.fromEvent(document, 'keypress').subscribe(e => {
console.log(e);
})
}


ngOnDestroy() {
this.subscription.unsubscribe();
}
}
小开

Yurzui 的回答对我不起作用，它可能是一个不同的 RC 版本，或者它可能是我的一个错误。不管怎样，下面是我在 Angular2 RC4中使用组件的方法(现在已经过时了)。

@Component({
...
host: {
'(document:keydown)': 'handleKeyboardEvents($event)'
}
})
export class MyComponent {
...
handleKeyboardEvents(event: KeyboardEvent) {
this.key = event.which || event.keyCode;
}
}
小开

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

从“@angle/core”导入{ HostListener } ;
然后在组件 t 文件中的任何位置使用下面的函数。

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

再加上2019年的角度8,

我不得不使用 keydown 而不是 keypress

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

到

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

工作 Stacklitz

小开

请注意“ document: keypress”是不推荐的。我们应该改用 document: keydown。

链接: https://developer.mozilla.org/fr/docs/Web/API/Document/keypress_event

小开

我觉得这样最好

Https://angular.io/api/platform-browser/eventmanager

例如，在 app.Component 中

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

我在这一点上挣扎了一下，所以; Tshoemake 提供了同样适用于 F 键的正确答案。 要防止 F 键执行它的原始浏览器操作(如 search) ，也可以调用 proventDefault ()方法。

@HostListener('document:keydown', ['$event'])
handleDeleteKeyboardEvent(event: KeyboardEvent) {
switch (event.key) {
case "F2":
this.myF2Action();
event.preventDefault();
break;
}
}

提交答案