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

就我而言（使用 Angular 10）可以很好地通过 console.log()keydown.escape跟踪事件：escape

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

但 Angular 变化检测器只能在keyup.escape.

Answer 4

现代的方法

@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();
   }