Góc 2 HostListener bấm phím phát hiện phím thoát?

Question

Tôi đang sử dụng phương pháp sau đây để phát hiện các bấm phím trên một trang. Kế hoạch của tôi là phát hiện khi phím Escape được nhấn và chạy một phương thức nếu có. Hiện tại tôi đang cố gắng ghi lại phím nào được nhấn. Tuy nhiên phím Escape không bao giờ được phát hiện.

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

Answer 1

Hãy thử nó với một sự kiện keydown hay keyup để nắm bắt chìa khóa Esc.

Answer 2

KeyDown và KeyUp có vẻ làm việc: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

Answer 3

Nó làm việc cho tôi bằng cách sử dụng đoạn mã sau:

const ESCAPE_KEYCODE = 27; 

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

hoặc theo cách ngắn hơn:

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

Answer 4

cách tiếp cận hiện đại

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