Bagaimana cara mendengarkan acara penekanan tombol di seluruh halaman?

Saya mencari cara untuk mengikat fungsi ke seluruh halaman saya (ketika pengguna menekan sebuah tombol, saya ingin itu memicu fungsi di component.ts saya)

Itu mudah di AngularJS dengan ng-keypresstetapi tidak berhasil (keypress)="handleInput($event)".

Saya mencobanya dengan pembungkus div di seluruh halaman tetapi tampaknya tidak berhasil. itu hanya bekerja jika fokusnya ada padanya.

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

Saya akan menggunakan dekorator @HostListener dalam komponen Anda:

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

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

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

Ada juga opsi lain seperti:

properti tuan rumah dalam @Componentdekorator

Angular merekomendasikan penggunaan @HostListenerdekorator pada properti host https://angular.io/guide/styleguide#style-06-03

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

Jawaban yurzui tidak berhasil untuk saya, mungkin versi RC yang berbeda, atau mungkin kesalahan di pihak saya. Bagaimanapun, inilah cara saya melakukannya dengan komponen saya di Angular2 RC4 (yang sekarang sudah cukup usang).

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

Hanya untuk menambahkan ini di 2019 w Angular 8,

Alih-alih menekan tombol, saya harus menggunakan tombol ke bawah

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

untuk

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

Bekerja Stacklitz

Jika Anda ingin melakukan acara apa pun pada penekanan tombol keyboard tertentu, dalam hal ini, Anda dapat menggunakan @HostListener. Untuk ini, Anda harus mengimpor HostListener di file ts komponen Anda.

impor {HostListener} dari '@ angular / core';
kemudian gunakan fungsi di bawah ini di mana saja di file ts komponen Anda.

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

Berhati-hatilah karena "document: keypress" sudah tidak digunakan lagi. Kita harus menggunakan document: keydown sebagai gantinya.

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

Saya pikir ini melakukan pekerjaan terbaik

https://angular.io/api/platform-browser/EventManager

misalnya di app.component

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