typescript - event - keyup angular 5

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

Question

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

Fue fácil en AngularJS con ng-keypress pero 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">

Answer 1

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

Answer 2

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

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

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

Answer 3

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''])

Answer 4

@HostListener decorador @HostListener 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 de host dentro de @Component decorator

Angular recomienda usar el decorador @HostListener 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.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();
  }
}