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

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

现代方法，event.key == "Escape"

旧的备选方案（.keyCode 和 .which）已弃用。

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

Answer 5

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

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

Answer 6

在我的例子中（使用 Angular 10）keydown.escape 通过 console.log():

可以很好地跟踪事件 escape

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

但是 Angular 更改检测器仅在 keyup.escape 下工作正常。