什麼是Angular2創建全局鍵盤快捷鍵（又名熱鍵）的方式？

在Angular2應用程序中創建全局鍵盤快捷鍵（又名熱鍵）的正確方法是什麼？什麼是Angular2創建全局鍵盤快捷鍵（又名熱鍵）的方式？

假設好的起點是工作：「？」用於提交表單，「Alt + s」用於提交表單。

我應該映射「？」嗎？以某種方式對主要組件，然後開發應用於那些應該在特定熱鍵上響應的組件的屬性指令，但是 - 如何防止輸入字段響應「？」。

2016-02-24 Andris Krauze

您可以使用此語法在模板

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

調用此方法在組件

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) { 
    ... 
    } 
}

或通過這個等效的語法

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

來源

2016-02-24 11:24:49

似乎''不支持「每一個細節一個答案嗎？（窗口：？KEYDOWN）'。可能只有https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart中列出的代碼 –

在我的鍵盤上「？」實際上是「Shift + /」，並且（window：keydown）分別捕獲它們。 –

我不知道你最後的評論是什麼。這是一個問題還是一個澄清，...？ –

您可以使用圖書館中，我創建了名爲angular2-hotkeys

它允許您創建快捷鍵這樣的：

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

來源

2016-06-16 15:38:22

我試過這個庫，但是當我編譯時，我得到了語義錯誤，例如... node_modules/angular2-hotkeys/src/directives/hotke ys.directive.ts（11,110）：錯誤TS2304：找不到名稱'ExtendedKeyboardEvent'。 ... 和更多。 –

你可以按照這個github問題中的指南來修復它：https://github.com/brtnshrdr/angular2-hotkeys/issues/7 –

不適用於角度cli beta 31 –

一個簡單而優雅的解決方案將類似於如下： -

創建一個全局服務，它將存儲快捷方式與可點擊元素的綁定。注意： - 使用NgOnDestroy刪除組件上的綁定。

現在創建一個指令，它將把鍵碼作爲輸入。

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

現在，在您的根大部分組件中，偵聽按鍵並將它們用作在全局服務中爲HotKeys定位元素的索引。現在獲得參考做這樣的事情。

我假設你已經格式化的錄製鍵代碼以這種格式= 32年1月23日-...，不要忘了他們在升/降序排序格式，都同時增加它的服務密鑰對陣列和同時檢查

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

this.keypair[combo]包含在其中加入angularHotKey directive元件的參考。

其它注意事項：1。）在angularHotKey指令，同時增加新的密鑰對和元素/點擊參考，請檢查是否有不一樣的組合存在配對，如果是拋出一個異常，這將是有幫助的，同時調試，防止你犯愚蠢的錯誤，並且在Angular 2組件類中，在ngOnDestroy方法中定義一個刪除與其子元素配對的所有快捷方式的邏輯。

訪問http://keycode.info/獲取鍵盤上所有類型鍵的鍵碼。

JavaScript multiple keys pressed at once有關如何處理組合按鍵

來源

2017-06-06 21:08:57

什麼是Angular2創建全局鍵盤快捷鍵（又名熱鍵）的方式？

回答

相關問題