angular - 以 Angular 监听关键事件

Question

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

我知道如何在输入上执行此操作，但我能否将其绑定(bind)到页面或组件，以便在表格附近按下一个键会触发事件？

Answer 1

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

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 只是为了演示