Angular 2 HostListener按鍵檢測轉義鍵？

Question

我正在使用以下方法來檢測頁面上的按鍵。我的計劃是檢測何時按Escape鍵並運行方法。目前我只是試圖記錄哪個鍵被按下。但是，Escape鍵從未被檢測到。

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

Answer 1

與​​或keyup事件試試吧捕捉Esc關鍵。

Answer 2

的keydown和KEYUP似乎工作：http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

Answer 3

它使用下面的代碼爲我工作：

const ESCAPE_KEYCODE = 27; 

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

或在更短的方式：

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

Answer 4

現代的方法

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