[解決済み] ページ全体のキー押下イベントをリスニングするには？

質問

私はページ全体に関数をバインドする方法を探しています（ユーザーがキーを押したとき、私はそれが私のcomponent.tsで関数をトリガしたい）。

AngularJSでは簡単に ng-keypress では簡単でしたが (keypress)="handleInput($event)" .

ページ全体のdivラッパーで試してみましたが、うまくいかないようです。 フォーカスが当たっているときだけ動作します。

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

どのように解決するのですか？

私なら ホストリスナー デコレータを追加します。

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

レンダラ.リスン

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