Angular 2 HostListener 키를 누르면 이스케이프 키가 감지됩니까?

Angular 2 HostListener 키를 누르면 이스케이프 키가 감지됩니까?

페이지에서 키 누름을 감지하기 위해 다음 방법을 사용하고 있습니다.내 계획은 이스케이프 키를 눌렀을 때 감지하고 만약 그렇다면 메소드를 실행하는 것입니다.현재는 어떤 키를 눌렀는지 기록하려고 합니다.그러나 이스케이프 키는 감지되지 않습니다.

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

사용해 보십시오.keydown또는keyup이벤트를 캡처할 수 있습니다.Esc키. 본질적으로, 당신은 대체할 수 있습니다.document:keypress와 함께document:keydown.escape:

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log(event);
}

다음 코드를 사용하여 작동했습니다.

const ESCAPE_KEYCODE = 27;

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

또는 더 짧은 방법으로:

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

현대적 접근법,event.key == "Escape"

기존 대안(.keyCode그리고..which)는 더 이상 사용되지 않습니다.

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

내 경우(앵글 10 포함)keydown.escape이벤트를 추적할 수 있습니다.escapeconsole.log():

@HostListener('keydown.escape')
fn() {
 console.log();
}

그러나 각도 변화 감지기는 다음과 같은 경우에만 작동합니다.keyup.escape.

Angular는 @HostListener 데코레이터로 이를 쉽게 만듭니다.이벤트 이름을 인수로 수락하는 함수 장식자입니다.해당 이벤트가 호스트 요소에서 발생하면 관련 함수를 호출합니다.

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: 
    KeyboardEvent) {
    this.closeBlade();
   }

키다운 및 키업이 작동하는 것 같습니다. http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

언급URL : https://stackoverflow.com/questions/42348837/angular-2-hostlistener-keypress-detect-escape-key