Angulaire 2 HostListener keypress détecter la touche d'échappement?

J'utilise la méthode suivante pour détecter les touches sur une page. Mon plan est de détecter le moment où la touche échap et exécuter une méthode si. Pour le moment, j'essaie juste de consigner quelle touche est enfoncée. Cependant, la clé D'échappement 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!');
  }
}
22
demandé sur Jeremy Parkhurst 2017-02-20 18:48:15

4 réponses

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);
}
28
répondu Sawant 2018-09-25 09:42:44

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) {
    // ...
}
27
répondu Gaurav Pandvia 2017-06-30 07:03:05

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

3
répondu Lucas Tétreault 2017-02-20 16:01:37

Approche Moderne

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key === "Escape") {
        // Do things
    }
}
3
répondu Gibolt 2017-12-03 01:11:11