倾听关键事件

Question

我有表格，我想添加一个功能，该功能将由向下箭头触发并导致选择下一行。因此，我想在任何地方使用向下箭头来触发组件中的功能。我不关心我知道如何在函数中进行选择的选择，那只是我的特定用例。我只是想知道当用户在组件或页面上的任何地方使用向下箭头时如何运行功能？

我看到了如何在输入上执行此操作，但是可以将其绑定到页面或组件上，以便按下表附近的键会触发事件吗？

Answer 1

您将从HostListener装饰器获取keyup事件。对于每个keyup事件，都有一个与事件关联的键码。您可以使用该键代码来区分其他键的所有键事件之间的向下箭头键按下。

export class AppComponent {
  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if(event.keyCode == KEY_CODE.DOWN_ARROW){
      // Your row selection code
      console.log(event);
    }
  }
}

export enum KEY_CODE {
    UP_ARROW = 38,
    DOWN_ARROW = 40,
    RIGHT_ARROW = 39,
    LEFT_ARROW = 37
}

在显示表的组件中使用上面的代码。我使用AppComponent只是为了演示

Answer 2

event.keyCode 已被弃用

您可以改用 event.key

    @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if(event.key == 'ArrowDown'){
      // Your row selection code
      console.log(event.key);
    }
  }