Como posso ouvir o evento de pressionamento de tecla em toda a página?

Estou procurando uma maneira de vincular uma função a minha página inteira (quando um usuário pressiona uma tecla, quero que ela acione uma função em meu component.ts)

Foi fácil no AngularJS com um, ng-keypressmas não funciona (keypress)="handleInput($event)".

Eu tentei com um invólucro div em toda a página, mas não parece funcionar. só funciona quando o foco está nele.

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

Eu usaria o decorador @HostListener em seu componente:

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

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

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

Existem também outras opções como:

propriedade hospedeira dentro do @Componentdecorador

A Angular recomenda o uso de @HostListenerdecorador em vez de propriedade 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();
  }
}

A resposta de yurzui não funcionou para mim, pode ser uma versão RC diferente ou pode ser um erro da minha parte. De qualquer forma, aqui está como eu fiz com meu componente no Angular2 RC4 (que agora está bastante desatualizado).

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

Só para adicionar a isso em 2019 w Angular 8,

em vez de pressionar a tecla, tive que usar keydown

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

para

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

Stacklitz de trabalho

Se você quiser realizar qualquer evento em qualquer pressionamento de botão específico do teclado, nesse caso, você pode usar @HostListener. Para isso, você deve importar HostListener no arquivo ts do seu componente.

import {HostListener} de '@ angular / core';
em seguida, use a função abaixo em qualquer lugar no arquivo ts do seu componente.

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

Esteja ciente de que "document: keypress" está obsoleto. Devemos usar document: keydown em vez disso.

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

Eu acho que isso faz o melhor trabalho

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

por exemplo em app.component

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