Angular 2 HostListener Keypress Détecter la touche d'échappement?

Question

J'utilise la méthode suivante pour détecter les pressions de touches sur une page. Mon plan consiste à détecter le moment où la touche Échap est enfoncée et à exécuter une méthode dans ce cas. Pour le moment, j'essaie simplement d'enregistrer quelle touche est enfoncée. Cependant, la touche Échap n'est jamais détectée.

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

Answer 1

Essayez-le avec un événement keydown ou keyup pour capturer la clé Esc . En substance, vous pouvez remplacer document:keypress par document:keydown.escape :

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

Answer 2

Cela a fonctionné pour moi en utilisant le code suivant:

 const ESCAPE_KEYCODE = 27;

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

ou de manière plus courte:

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

Answer 3

Une approche moderne

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

Answer 4

keydown et keyup semblent fonctionner: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/