Was ist die Methode von Angular2 zum Erstellen von globalen Tastaturkürzeln (ua Hotkeys)?

Question

Was wäre die richtige Methode zum Erstellen von globalen Tastenkombinationen (a.k.a. Hotkeys) in Angular2-Anwendung?

Sagen wir, ein guter Startpunkt wäre zu arbeiten: "?" für den Spickzettel und "Alt + s" für das Formular.

Sollte ich "?" Irgendwie zur Hauptkomponente und dann Entwicklung einer Attributrichtlinie, die auf diejenigen Komponenten angewendet werden würde, die auf bestimmte Hotkeys reagieren sollen, aber dann - wie verhindere ich, dass Eingabefelder auf "?" reagieren.

Answer 1

Sie können diese Syntax in Ihrer Vorlage verwenden

<div (window:keydown)="doSomething($event)">click me<div> 

diese Methode in Ihrer Komponente zu nennen

doSomething($event) { 
    // read keyCode or other properties 
    // from event and execute a command 
} 

auf der Host-Komponente zu hören selbst

@Component({ 
    selector: 'app-component', 
    host: { '(window:keydown)': 'doSomething($event)' }, 
}) 
class AppComponent { 
    doSomething($event) { 
    ... 
    } 
} 

oder durch diese äquivalente Syntax

@Component({ 
    selector: 'app-component', 
}) 
class AppComponent { 
    @HostListener('window:keydown', ['$event']) 
    doSomething($event) { 
    ... 
    } 
} 

Answer 2

können Sie eine Bibliothek verwende ich angular2-hotkeys genannt erstellt

Es Sie Hotkeys wie diese erstellen können:

constructor(private _hotkeysService: HotkeysService) { 
    this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent) => { 
    console.log('Typed hotkey'); 
    return false; // Prevent bubbling 
})); } 

Answer 3

Eine einfache und elegante Lösung wie wie folgt aus: -

Erstellen Sie einen globalen Dienst, der die Verknüpfungen von Verknüpfungen mit anklickbaren Elementen speichert. Hinweis: - Verwenden Sie NgOnDestroy, um Bindungen auf Komponenten zu entfernen, wird zerstört.

Jetzt erstellen Sie eine Direktive, die Keycodes als Eingabe wie folgt nimmt.

<button [angularHotKey]="[17,78]">New Document</button> 
<!-- CTRL = 17 & n = 78 --> 

Jetzt in Ihrer meisten Komponente Wurzel, hört Drücken von Tasten und als Indizes verwendet für für HotKeys Elemente in Global Service zu lokalisieren. Jetzt, um die Referenz zu bekommen, mach so etwas.

Ich nehme an, Sie haben aufgezeichnet keycodes in diesem Format formatiert = 1-23-32 -..., vergessen Sie nicht, sie in aufsteigend zu sortieren/Format absteigend, sowohl während es das Hinzufügen Array in Dienst Keypair und während

Überprüfung

if(this.keypair[combo].length)this.keypair[combo].click(); 

this.keypair[combo] enthalten Referenz des Elements, auf dem angularHotKey directive wurde hinzugefügt.

Weitere Hinweise: 1.) In angularHotKey Richtlinie während neues Schlüsselpaar hinzufügen und Element/klickbaren Verweis überprüfen Sie bitte, ob es nicht die Paarung mit gleicher Combo existieren, wenn ja eine Ausnahme werfen, es wird hilfreich sein, während das Debuggen und verhindern, dass Sie dumme Fehler machen, und in der Angular 2-Komponentenklasse definieren Sie in der ngOnDestroy-Methode eine Logik zum Entfernen aller Verknüpfungen, die mit den untergeordneten Elementen gepaart sind.

Besuchen Sie http://keycode.info/, um Keycodes für alle Arten von Tasten auf Ihrer Tastatur zu erhalten.

JavaScript multiple keys pressed at once Eine Antwort mit jedem kleinen Detail darüber, wie mit Combo-Taste drückt