グローバルキーボードショートカット（a.k.a.ホットキー）を作成する角度2とは何ですか？

Question

Angular2アプリケーションでグローバルキーボードショートカット（a.k.a.ホットキー）を作成する適切な方法は何ですか？

出発点がうまくいくとします。「？」チートシートの場合は「Alt + s」、フォームの提出の場合は「Alt + s」となります。

"？"何らかの形でメインコンポーネントに接続し、特定のホットキーで応答する必要のあるコンポーネントに適用される属性ディレクティブを作成しますが、入力フィールドが "？"に応答しないようにするにはどうすればよいですか？

Answer 1

あなたは

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

は、ホストコンポーネント自体

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

または上で聴くに

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

は、あなたのコンポーネントでこのメソッドを呼び出すために、あなたのテンプレートでこの構文を使用することができますこの同等の構文で

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

Answer 2

あなたはそれはあなたがこのようなホットキーを作成することができますangular2-hotkeys

と呼ばれる、私が作成したライブラリを使用することができます：シンプルかつエレガントな解決策には、次のようようになります。

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

Answer 3

を： -

クリック可能な要素を持つショートカットのバインディングを格納するグローバルサービスを作成します。 注： - コンポーネント上のバインディングを削除するためにNgOnDestroyを使用してください。

このように、キーコードを入力する指示文を作成します。

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

今、あなたのルートほとんどのコンポーネントで、キー入力を聞いて、ホットキーのためのグローバルサービスの要素を見つけるための指標としてそれらを使用しています。今では参照を取得することで、このようなことをします。

私はあなたがフォーマットされていると仮定は、-... = 1-23-32この形式でキーコードを記録フォーマットを降順/昇順で並べ替えることを忘れてはいけない、 両方のサービスに鍵ペアの配列に追加しながら

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

this.keypair[combo]を確認しながらするangularHotKey directiveが追加された要素の参照を含みます。

注：angularHotKeyディレクティブで、新しいキーペアと要素/クリック可能な参照を追加しているときに同じコンボでペアが存在するかどうかをチェックしてください。例外が発生した場合、デバッグ中に役立ちます。愚かな間違いを避け、ngOnDestroyメソッドのAngular 2コンポーネントクラスでは、子要素とペアになっているすべてのショートカットを削除するロジックを定義します。

http://keycode.info/にアクセスして、キーボードにあるすべての種類のキーのキーコードを取得してください。

JavaScript multiple keys pressed at once