javascript - Angular 2+ 拦截 Command+S 的优雅方式

Question

尝试为 Command+S 实现快捷键组合以保存表单。

我读过这个 - https://angular.io/guide/user-input , 但它没有说明任何有关元或命令的信息。

尝试用以下方式围绕表单:

<div
  (keyup.command.s)="save()"
  (keyup.command.u)="save()"
  (keyup.control.u)="save()"
  (keyup.control.s)="save()"
  (keyup.meta.u)="save()"
>

其中，只有 control.u 和 control.s 有效。

凭借 Angular 2+ 的所有强大功能和跨浏览器功能，我希望可以使用 (keyup...) 以某种优雅的方式处理此问题。

而且可以肯定的是，许多 Angular 开发者都使用 Mac :)。

我也读过 How does one capture a Mac's command key via JavaScript?和 http://unixpapa.com/js/key.html但仍然希望 Angular 优雅的解决方案，而不是与特定于浏览器的东西作斗争......

Answer 1

全局监听器，未弃用的答案:

@HostListener('window:keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
    if ((event.metaKey || event.ctrlKey) && event.key === 's') {
        this.save();
        event.preventDefault();
    }
}