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/