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

Question

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

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

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

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

原文由 L.querter 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

还有其他选项，例如：

@Component 装饰器内的 主机属性

Angular 建议在主机属性上使用 @HostListener 装饰器 https://angular.io/guide/styleguide#style-06-03

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

渲染器.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();
  }
}

原文由 yurzui 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为这是最好的工作

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

原文由 Whisher 发布，翻译遵循 CC BY-SA 4.0 许可协议