如何检测何时在 Angular 中“无输入”按下或释放某个键？答案

【问题标题】：How can I detect when a key is pressed or released in Angular 'without input'?如何检测何时在 Angular 中“无输入”按下或释放某个键？
【发布时间】：2019-10-07 12:02:34
【问题描述】：

我有一个默认为 false 的布尔变量。所以现在，我希望变量在按下键时变为“真”，而在释放键时变为“假”。

示例：当我按下shift键时，声明的变量应该返回true，当我释放它时，变量应该返回false。

我知道 Angular JS 有两个键盘事件（keydown 和 Keyup），但据我所知，在大多数情况下，它们仅用于“输入”字段。那么有没有替代方法来使用没有输入字段的方法？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

【讨论】：

【解决方案2】：

我会在你的组件中使用 @HostListener 装饰器：

import { HostListener } from '@angular/core';

@Component({
  ...
})

export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

将您的条件放在该块中，您将成为 gtg。也有其他方法，所以你知道。

【讨论】：