Angular 2 Klucz protokołu HostListener wykrywa klawisz Escape?

Question

Korzystam z poniższej metody, aby wykryć naciśnięcia klawiszy na stronie. Mój plan polega na wykryciu, kiedy klawisz Escape jest wciśnięty i uruchomić metodę, jeśli tak. Na razie właśnie próbuję zarejestrować, który klawisz jest wciśnięty. Jednak klawisz Escape nigdy nie zostanie wykryty.

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

Answer 1

Spróbuj z imprezy keydown lub keyup przechwycić klucz Esc.

Answer 2

keyDown i keyup wydają się działać: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

Answer 3

on pracował dla mnie za pomocą następującego kodu:

const ESCAPE_KEYCODE = 27; 

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

lub w krótszym sposób:

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

Answer 4

nowoczesne podejście

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