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

Question

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

在 AngularJS 中使用 ng-keypress 很容易，但它不适用于 (keypress)="handleInput($event)"。

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

<div (keypress)="handleInput($event)" tabindex="1">

Answer 1

我会在你的组件中使用 @HostListener 装饰器：

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

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

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

还有其他选项，例如：

host 属性 在 @Component decorator

内

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

renderer.listen

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

Observable.fromEvent

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

Answer 2

yurzui 的回答对我不起作用，可能是不同的 RC 版本，也可能是我的错误。无论哪种方式，这都是我在 Angular2 RC4 中使用我的组件的方式（现在已经过时了）。

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

Answer 3

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

从'@angular/core'导入{HostListener};
然后在你的组件 ts 文件中的任何地方使用下面的函数。

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

Answer 4

只需在 2019 年添加 Angular 8，

我不得不使用 keydown

而不是按键

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

到

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

工作Stacklitz

Answer 5

请注意“document:keypress”已弃用。我们应该改用 document:keydown。

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

Answer 6

我认为这是最好的工作

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

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

How can I listen for keypress event on the whole page?

typescript

angular

keypress

key-bindings