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

Question

J'utilise la méthode suivante pour détecter les pressions de touche sur une page. Mon plan est de détecter quand la touche Échap est enfoncée et d'exécuter une méthode si c'est le cas. Pour l'instant, je tente juste de noter quelle touche est enfoncée. Cependant, la touche Escape 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 avec un événement keydown ou keyup pour capturer la clé Esc.

Answer 2

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

Answer 3

Il a travaillé 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) { 
    // ... 
} 

Answer 4

approche moderne

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