Jaki jest sposób Angular2 tworzenia globalnych skrótów klawiaturowych (skróty klawiszowe a.k.a)?

Question

Jaki byłby właściwy sposób tworzenia globalnych skrótów klawiaturowych (skróty klawiszowe a.k.a.) w aplikacji Angular2?

Załóżmy, że dobrym punktem wyjścia będzie praca: "?" dla arkusza oszukańczego i "Alt + s" dla przesłania formularza.

Czy należy zamapować "?" w jakiś sposób do głównego komponentu, a następnie opracować dyrektywę atrybutu, która byłaby zastosowana do tych składników, które powinny reagować na poszczególne klawisze szybkiego dostępu, ale następnie - jak zapobiec wprowadzaniu zmiennych wejściowych do "?".

Answer 1

Możesz użyć tej składni w szablonie

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

wywołać tę metodę w swojej komponentu

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

Aby słuchać na części przyjmującej sam

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

lub według tej równoważnej składni

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

Answer 2

Można użyć biblioteki stworzyłem nazwie angular2-hotkeys

Pozwala tworzyć skróty klawiszowe tak:

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

Answer 3

Proste i eleganckie rozwiązanie będzie wyglądać następująco: -

Utwórz usługę globalną, która będzie przechowywać powiązania skrótów z elementami klikalnymi. Uwaga: - Użyj NgOnDestroy, aby usunąć wiązania na komponencie zostanie zniszczony.

Teraz utwórz dyrektywę, która będzie wprowadzać kody klawiszy jako dane wejściowe.

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

Teraz w swoim głównym składnikiem większości, słuchać naciśnięć klawiszy i używać ich jako wskaźników do lokalizowania elementów w Global Service dla skrótów klawiszowych. Teraz po uzyskaniu referencji zrób coś takiego.

Zakładam, że masz sformatowany nagrany keycodes w tym formacie = 23.01.32 -..., nie zapomnij, aby posortować je w rosnącej/malejącej format, zarówno podczas dodawania go do pary kluczy tablicy w eksploatacji i sprawdzając

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

this.keypair[combo] zawiera odniesienie do elementu w którym angularHotKey directive dodano.

Dalsze Uwagi: 1.) W dyrektywie angularHotKey dodając nową parę kluczy i elementów/klikalny odniesienia należy sprawdzić, czy nie istnieją parowanie z samego combo, jeśli tak rzucać wyjątek, będzie to pomocne podczas debugowania i uniemożliwiając wykonywanie głupich błędów, a w klasie Angular 2 component, w metodzie ngOnDestroy zdefiniować logikę usuwania wszystkich skrótów sparowanych z jego elementami potomnymi.

Odwiedź stronę http://keycode.info/, aby uzyskać kody klawiszy wszystkich typów kluczy znajdujących się na klawiaturze.

JavaScript multiple keys pressed at once odpowiedzi z najdrobniejsze szczegóły na temat sposobów radzenia sobie z kombi naciśnięć klawiszy