¿Cómo puedo escuchar el evento de pulsación de tecla en toda la página?

Estoy buscando una forma de vincular una función a toda mi página (cuando un usuario presiona una tecla, quiero que active una función en mi componente.ts)

Fue fácil en AngularJS con a ng-keypresspero no funciona con (keypress)="handleInput($event)".

Lo probé con un contenedor div en toda la página, pero no parece funcionar. solo funciona cuando el foco está en él.

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

Me gustaría utilizar @HostListener decorador dentro de su componente:

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

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

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

También hay otras opciones como:

propiedad del anfitrión dentro del @Componentdecorador

Angular recomienda usar @HostListenerdecorador sobre la propiedad del 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.escuchar

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

La respuesta de yurzui no funcionó para mí, podría ser una versión RC diferente, o podría ser un error de mi parte. De cualquier manera, así es como lo hice con mi componente en Angular2 RC4 (que ahora está bastante desactualizado).

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

Solo para agregar a esto en 2019 w Angular 8,

en lugar de presionar teclas, tuve que usar keydown

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

a

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

Stacklitz de trabajo

Si desea realizar cualquier evento en cualquier botón específico del teclado, en ese caso, puede usar @HostListener. Para ello, debe importar HostListener en el archivo ts de su componente.

importar {HostListener} desde '@ angular / core';
luego use la siguiente función en cualquier lugar del archivo ts de su componente.

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

Tenga en cuenta que "document: keypress" está en desuso. Deberíamos usar document: keydown en su lugar.

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

Creo que esto hace el mejor trabajo

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

por ejemplo en app.component

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