कोणीय 2 होस्ट लिस्टनर कीप्रेस एस्केप कुंजी का पता लगाता है?

Question

मैं किसी पृष्ठ पर कीप्रेस का पता लगाने के लिए निम्न विधि का उपयोग कर रहा हूं। मेरी योजना यह पता लगाना है कि एस्केप कुंजी दबाई जाती है और यदि ऐसा हो तो एक विधि चलाएं। फिलहाल मैं लॉग इन करने का प्रयास कर रहा हूं कि कौन सी कुंजी दबाई जाती है। हालांकि एस्केप कुंजी कभी नहीं पता चला है।

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

Answer 1

Esc कुंजी कब्जा करने के लिए एक keydown या keyup घटना के साथ यह कोशिश करो।

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 
    } 
}