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