javascript - event - Angular 2 HostListener keypress detectar escape key?

hostlistener click angular 4

Question

Estoy usando el siguiente método para detectar pulsaciones de teclas en una página. Mi plan es detectar cuándo se presiona la tecla Escape y ejecutar un método si es así. Por el momento estoy intentando registrar qué tecla se presiona. Sin embargo, la tecla Escape nunca se detecta.

@HostListener(''document:keypress'', [''$event''])
handleKeyboardEvent(event: KeyboardEvent) {
console.log(event);
let x = event.keyCode;
if (x === 27) {
console.log(''Escape!'');
}
}

Answer 1

Enfoque moderno

@HostListener(''document:keydown'', [''$event'']) onKeydownHandler(event: KeyboardEvent) {
if (event.key === "Escape") {
// Do things
}
}

Answer 2

Funcionó para mí usando el siguiente código:

const ESCAPE_KEYCODE = 27;
@HostListener(''document:keydown'', [''$event'']) onKeydownHandler(event: KeyboardEvent) {
if (event.keyCode === ESCAPE_KEYCODE) {
// ...
}
}

o en forma más corta:

@HostListener(''document:keydown.escape'', [''$event'']) onKeydownHandler(evt: KeyboardEvent) {
// ...
}

Answer 3

Inténtelo con un evento keydown o keyup para capturar la Esc En esencia, puede reemplazar document:keypress con document:keydown.escape :

@HostListener(''document:keydown.escape'', [''$event'']) onKeydownHandler(event: KeyboardEvent) {
console.log(event);
}

Answer 4

keydown y keyup parecen funcionar: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/