作者:tttt | 来源:互联网 | 2023-09-05 15:17
我尝试以以下提到的链接方式添加快捷方式,因为我有许多要为App设置的快捷方式。
App.Componet.ts
export class AppComponent {
name = 'Angular';
constructor(private hotkeys: Hotkeys) {
hotkeys.addShortcut({ keys: 'alt.shift.f',description: 'Add Widget' }).pipe(take(2)).subscribe(console.log);
hotkeys.addShortcut({ keys: 'alt.j',description: 'Open Settings' }).subscribe(console.log);
}
log($event) {
console.log($event)
}
}
Hotkeys.service.ts
import { Injectable,Inject } from '@angular/core';
import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { DOCUMENT } from "@angular/common";
import { MatDialog } from '@angular/material';
import { HotkeysDialogComponent } from './hotkeys-dialog/hotkeys-dialog.component';
type OptiOns= {
element: any;
description: string | undefined;
keys: string;
}
@Injectable({
providedIn: 'root'
})
export class Hotkeys {
hotkeys = new Map();
defaults: Partial = {
element: this.document
}
constructor(private eventManager: EventManager,private dialog: MatDialog,@Inject(DOCUMENT) private document: Document) {
this.addShortcut({ keys: 'shift.?' }).subscribe(() => {
this.openHelpModal();
});
}
addShortcut(options: Partial) {
const merged = { ...this.defaults,...options };
const event = `keypress.${merged.keys}`;
merged.description && this.hotkeys.set(merged.keys,merged.description);
return new Observable(observer => {
const handler = (e) => {
e.preventDefault()
observer.next(e);
};
const dispose = this.eventManager.addEventListener(merged.element,event,handler);
return () => {
dispose();
this.hotkeys.delete(merged.keys);
};
})
}
openHelpModal() {
this.dialog.open(HotkeysDialogComponent,{
width: '500px',data: this.hotkeys
});
}
}
https://stackblitz.com/edit/angular-mbz3df?file=src/app/app.component.ts
但是,Alt.Shift.R如何在MAC机器中不起作用。它可以在Windows Machine for Chrome和Internet Explorer中工作。
我们是否可以通过其他任何方式将快捷方式添加到Web应用程序。
预期:即使在MAC中也可以在按alt.shift.r时执行所需的操作