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

尝试使用

keydown

或

keyup

事件来捕获

Esc

键。本质上，您可以将

document:keypress

替换为

document:keydown.escape

：

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

Answer 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) {
    // ...
}

Answer 3

现代方法，

event.key == "Escape"

旧的替代方案（

.keyCode

和

.which

）已弃用。

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

Answer 4

就我而言（使用 Angular 10）

keydown.escape

可以很好地通过 console.log() 跟踪事件

escape

：

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

但是角度变化检测器只有在使用

keyup.escape

时才能正常工作。

Answer 5

Angular 通过 @HostListener 装饰器使这一切变得简单。这是一个函数装饰器，接受事件名称作为参数。当该事件在宿主元素上触发时，它会调用关联的函数。

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

Answer 6

keydown 和 keyup 似乎有效：http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

Answer 7

我正在使用 Angular 16，只有

window:keyup

（不是 keydown 或 keypress）对我有用：

@HostListener('window:keyup', ['$event'])
  onKeyup(event: any) {
    if (event.key == 'Escape') {
      console.log('Escape key pressed!');
    }
  }