Was ist Angular2, um globale Tastaturkürzel zu erstellen (ua Hotkeys)?

Was wäre der richtige Weg der Schaffung globaler Tastaturkürzel (shortcuts ein.k.ein. hotkeys) in Angular2 Anwendung?

Sagen wir mal guter Ausgangspunkt wäre, um zu arbeiten: "?" für die cheat-sheet und "Alt+s" für die Einreichung von form.

Soll ich anzeigen "?" irgendwie Hauptkomponente und dann entwickeln Attribut-Richtlinie, die angewendet werden, um diejenigen Teile, die Antworten auf bestimmte hotkeys, aber dann - wie verhindere ich, dass input-Felder aus der Reaktion auf "?".

InformationsquelleAutor der Frage Andris Krauze | 2016-02-24

  1. 37

    Können Sie diese syntax verwenden, die in Ihrer Vorlage

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

    ruft diese Methode in der Komponente,

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

    Hören auf die host-Komponente selbst

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

    oder durch das äquivalente syntax

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

    InformationsquelleAutor der Antwort Günter Zöchbauer

  2. 8

    Können Sie eine Bibliothek, die ich erstellt namens angular2-hotkeys

    Es ermöglicht Ihnen das erstellen von hotkeys wie diese:

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

    InformationsquelleAutor der Antwort Nick Richardson

  3. 0

    Eine einfache und elegante Lösung Aussehen wird, wie folgt:-

    Erstellen Sie einen globalen service an, der gespeichert wird, die Bindungen von Verknüpfungen mit klickbaren Elementen.
    Hinweis:- Verwenden Sie NgOnDestroy, zum entfernen von Bindungen, die Komponente zerstört.

    Erstellen Sie nun eine Richtlinie, die keycodes als input wie in diesem.

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

    Nun in Ihrem root-Komponente, hören drücken von Tasten und verwenden Sie Sie als Indizes für das Auffinden von Elementen im Globalen Service für die HotKeys. Jetzt immer auf der Referenz so etwas tun.

    Ich davon aus, dass Sie formatiert aufgenommen keycodes in diesem format =
    1-23-32-... , nicht zu vergessen, um Sie zu Sortieren (in aufsteigender/absteigender Reihenfolge-format,
    sowohl beim hinzufügen Schlüsselpaar array im service und bei der überprüfung

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

    this.keypair[combo] enthalten Referenz von element, auf dem die angularHotKey directive Hinzugefügt wurde.

    Weitere Hinweise:
    1.) In angularHotKey Richtlinie beim hinzufügen von neuen Schlüsselpaar und ein element/eine anklickbare Referenz, überprüfen Sie bitte, ob es nicht existieren Paarung mit der gleichen combo, wenn ja, werfen Sie eine Ausnahme, es wird hilfreich sein beim Debuggen und verhindern, dass Sie tun dumme Fehler, und in Eckige 2-Komponenten-Klasse,in ngOnDestroy Methode definieren, die eine Logik zum entfernen alle Verknüpfungen, gepaart mit Kind-Elemente.

    Besuchen http://keycode.info/ für immer keycodes für alle Arten von Schlüsseln auf der Tastatur.

    JavaScript mehrere Tasten auf einmal gedrückt Eine Antwort mit jedem kleinen detail über den Umgang mit dem combo-Taste drückt

    InformationsquelleAutor der Antwort Ravinder Payal

Schreibe einen Kommentar