Angular 2 HostListener keypress обнаруживает escape-ключ?

Я использую следующий метод для обнаружения нажатия клавиш на странице. Мой план состоит в том, чтобы обнаружить, когда нажата клавиша Escape и запустить метод, если это так. На данный момент я просто пытаюсь записать, какой ключ нажат. Однако ключ Escape не обнаружен.

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

Ответ 1

Попробуйте сделать это с помощью события keydown или keyup чтобы получить Esc. В сущности, вы можете заменить document:keypress с document:keydown.escape:

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

Ответ 2

Он работал у меня, используя следующий код:

const ESCAPE_KEYCODE = 27;

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

или короче:

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

Ответ 3

Современный подход

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

Ответ 4

keydown и keyup работают: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

Ответ 5

Как удалить это событие при переходе на другую страницу?

Ответ 6

KeyDown и KeyUp не работают в полноэкранном режиме. Можете ли вы предложить подходящий способ?

Ответ 7

С Angular это легко сделать с помощью декоратора @HostListener. Это декоратор функции, который принимает имя события в качестве аргумента. Когда это событие запускается на элементе хоста, он вызывает связанную функцию.

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