Angular应用程序中的DIY键盘快捷键– hotkeys.js

Angular应用程序中的DIY键盘快捷键– hotkeys.js
插件名称 hotkeys.js
发布时间 2020年4月29日
插件作者 ngneat

Angular的热键库,用于声明侦听Web应用程序中的快捷方式事件。

安装:

# NPM
$ npm install @ngneat/hotkeys --save

导入库

import { HotkeysModule } from '@ngneat/hotkeys';
@NgModule({
  imports: [HotkeysModule]
})
export class AppModule {}

将此库用作指令

<input hotkeys="meta.n" 
hotkeysGroup="File" 
hotkeysDescription="New Document" 
(hotkey)="handleHotkey($event)"

将此库用作服务

import { HotkeysService } from '@ngneat/hotkeys';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private hotkeys: HotkeysService) {}
  ngOnInit() {
    this.hotkeys.addShortcut({ keys: 'meta.a' }).subscribe(e => console.log('Hotkey', e));
  }
}

可用的选择:

interface Options {
  // 组名
  group: string;
  // 热键目标元素(默认为`document`)
  element: HTMLElement;
  // 事件类型(默认为`keydown`)
  trigger: 'keydown' | 'keyup';
  // 热键说明
  description: string;
  // 包含在要显示在帮助对话框中的快捷方式列表中(默认为“ true ”)
  showInHelpMenu: boolean;
  // 是否阻止事件的默认行为。(默认为“ true”)
  preventDefault: boolean;
}