【问题标题】：Angular 2 HostListener keypress detect escape key?Angular 2 HostListener 按键检测转义键？
【发布时间】：2017-07-09 23:37:57
【问题描述】：

我正在使用以下方法来检测页面上的按键。我的计划是检测 Escape 键何时被按下，如果是则运行一个方法。目前我只是试图记录按下了哪个键。但是从未检测到 Escape 键。

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

【问题讨论】：

标签： javascript angular escaping keypress

【解决方案1】：

尝试使用keydown 或keyup 事件来捕获Esc 键。本质上，您可以将document:keypress 替换为document:keydown.escape：

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

【讨论】：

谢谢兄弟。你让我开心！
要决定使用哪一个关键事件，请查看这个 SO 答案：stackoverflow.com/a/46403258/3380547
事件规范是如何工作的？ document:keydown.escape 似乎相当随意。是否有任何关于有效语法的文档？我什至无法在 Angular 中找到 HostListener 指令功能的正确实现，侦听器似乎深埋在内部。
如果这不起作用，请尝试使用 'window:keydown.espace'。

【解决方案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) {
    // ...
}

【讨论】：

请注意，KeyCode 是deprecated，您可以替换为event.key 并匹配字符串“Escape”。无需使用代码，具有使代码易于阅读的副作用。
很好 document:keydown.escape 所以我们不需要这样做 27 检查。谢谢。

【解决方案3】：

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

旧的替代品（.keyCode 和 .which）已弃用。

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

【讨论】：

在 IE 11 中不起作用，其中键名为“Esc”：if (event.key === "Escape" || event.key === "Esc")跨度>
好收获！公平地说，标题是“现代”：D
在使用带有角度组件的条码扫描仪时，我一直在捕获字符代码 13（输入键）时遇到问题。从 keypress 更改为 keydown 为我解决了这个问题。

【解决方案4】：

在我的情况下（使用 Angular 10）keydown.escape 可以很好地通过 console.log() 跟踪事件 escape：

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

但 Angular 变化检测器仅适用于 keyup.escape。

【讨论】：

【解决方案5】：

keydown 和 keyup 似乎可以工作：http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

【讨论】：

【解决方案6】：

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

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

【讨论】：

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

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