Angulaire 2 HostListener keypress détecter échapper à la clé?

Je suis en utilisant 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. Pour le moment, je suis juste essayer d'ouvrir une session qui touche est enfoncée. Toutefois, la touche d'Échappement n'est jamais détecté.

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

OriginalL'auteur Jeremy Parkhurst | 2017-02-20

  1. 35

    Essayer avec un keydown ou keyup événement pour capturer le Esc clé. En essence, vous pouvez remplacer document:keypress avec document:keydown.escape:

    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log(event);
}
    Merci bro. vous avez fait ma journée!
    Pour décider laquelle l'un des événements clés à utiliser, cochez cette SORTE de réponse: stackoverflow.com/a/46403258/3380547
    C'est seulement keyup qui a fonctionné pour moi :bravo:

    OriginalL'auteur Sawant

  2. 27

    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 à plus court chemin:

    @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
    //...
}
    Notez que le mot de Code est deprecated, vous pouvez remplacer par événement.clé et le match contre la chaîne de "s'Échapper". Pas besoin de faire usage de codes, avoir le côté pour effet de rendre le code facile à lire.
    Nice document:keydown.escape donc nous n'avons pas besoin de le faire 27 vérifier. Merci.

    OriginalL'auteur Gaurav Pandvia

  3. 3

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

    OriginalL'auteur Lucas Tétreault

  4. 3

    Approche moderne

    @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key === "Escape") {
        //Do things
    }
}
    Ne fonctionne pas sous IE 11, où la clé est appelé "Esc": if (event.key === "Escape" || l'événement.key === "Esc")
    Bonne prise! Pour être juste, cependant, le titre est "Moderne": D
    :)) vous êtes en droit

    OriginalL'auteur Gibolt