web-dev-qa-db-fra.com

Angular 2 HostListener appuyez sur la touche d'échappement pour la détecter?

J'utilise la méthode suivante pour détecter les pressions de touche sur une page. Mon plan consiste à détecter le moment où la touche Échap est enfoncée et à exécuter une méthode si c'est le cas. Pour le moment, j'essaie simplement de consigner la touche sur laquelle vous appuyez. 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!');
  }
}
javascriptangularescapingkeypress
36
Jeremy Parkhurst

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

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

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) {
    // ...
}
30
Gaurav Pandvia

Approche moderne

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

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

3
Lucas Tétreault

Angular rend cela facile avec le décorateur @HostListener. C'est un décorateur de fonctions qui accepte un nom d'événement en tant qu'argument. Lorsque cet événement est déclenché sur l'élément Host, il appelle la fonction associée.

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: 
    KeyboardEvent) {
    this.closeBlade();
   }
0
Meikandanathan