angular2：如何僅用鍵盤控制整個應用程序？

你會推薦什麼方法來控制只有鍵盤的整個應用程序？我發現Spotlight lib，但它依賴於enyojs，它似乎有它自己的組件模型，整體enyojs似乎是一種矯枉過正。angular2：如何僅用鍵盤控制整個應用程序？

到目前爲止，我在app.component.ts監聽的keydown事件：

@HostListener('window:keydown', ['$event']) onKeydown(event: any) { 
    event.preventDefault(); 
    this.mainKeydownHandler.handle(event.keyCode); 
}

它要處理的keydown事件的每個組件註冊到MainKeydownHandler的處理程序，當keydown事件occures MainKeydownHandler代表一個事件註冊的處理程序。在MainKeydownHandler的處理方法中，相應的處理程序由document.activeElement的類（我沒有找到更多「angular2-like」方式來獲取當前關注的元素）確定。所以現在我必須將適當的類名稱添加到一組我希望能夠關注的元素。

此外，組件的處理程序獲取所有的可選元素：

@ViewChildren('selectable') elements: QueryList<ElementRef>;

，所以我需要與處理程序的ID添加#selectable和類我想集中每個元素。組件的處理程序然後接收keyCode並確定接下來選擇哪個元素，或者從另一個組件返回到先前選定的元素，依此類推。

這種方法看起來很尷尬，當新組件需要處理keydown事件並且存在組件完全失去焦點的情況時，包含相當多的代碼：當我從某個列表中刪除一個項目，然後該組件被重新渲染（某些服務或MainKeydownHandler可能會記住，但這可能會導致相當多的元素需要在通過組件瀏覽用戶的過程中記住）。

是否有更好，更簡單，更通用，更具說明性的方式來控制整個angular2應用程序，只使用鍵盤（keydown/keyup事件）？

或者，對於這種使用情況，使用Spotlight（with enyojs dep。）和angular2是否合理？你可以提供angular2 +聚光燈工作的運動員。我無法讓這兩個人一起工作。

來源

2016-12-07 Petr Marek

你想瀏覽周圍的鍵盤元素還是有一定的自定義操作在遊戲中響應鍵盤事件？ – sabithpocker

只是導航（上，下，右，左）和選擇（輸入） –

如果你想啓用基本的鍵盤導航，你可以使用tabindex這是一個標準的做法。見specification

document.getElementById('mylist').focus();

:focus{ 
 
    border: 1px solid red; 
 
    }

Press TAB to navigate. 
 
<ul id="mylist" tabindex="-1"> 
 
    <li tabindex="1"> One </li> 
 
    <li tabindex="2"> Two </li> 
 
    <li tabindex="4"> Four </li> 
 
    <li tabindex="3"> Three </li> 
 
</ul>

如果你想用箭頭鍵來做到這一點，你必須聽事件上的文檔和手動focus()使用JavaScript的元素。來回導航會更容易，而不是直接查找佈局中當前元素上下的元素。您將不得不比較x，y座標或偏移量。

document.getElementById('mylist').focus(); 
 

 
window.onkeydown = function(e) { 
 
    var curr = document.activeElement; 
 
    var treeWalker = document.createTreeWalker(
 
    document.body, 
 
    NodeFilter.SHOW_ELEMENT, 
 
    { acceptNode: function(node) { return (node.tabIndex === -1)?NodeFilter.FILTER_SKIP: NodeFilter.FILTER_ACCEPT} }, 
 
    false 
 
); 
 
    treeWalker.currentNode = curr; 
 
    
 
    if (e.keyCode == 39) { 
 
    treeWalker.nextNode().focus(); 
 
    } 
 
    if (e.keyCode == 37) { 
 
    treeWalker.previousNode().focus(); 
 
    } 
 
};

:focus { 
 
    border: 1px solid red; 
 
}

Press Right/Left arrow keys to navigate 
 
<ul id="mylist" tabindex="-1"> 
 
    <li tabindex="1">One</li> 
 
    <li tabindex="2">Two</li> 
 
    <li tabindex="4">Four</li> 
 
    <li tabindex="3">Three</li> 
 
    <li>Not selectable</li> 
 
    <li tabindex="5">Five</li> 
 
</ul>

來源

2016-12-07 10:05:38 sabithpocker

你可以看看https://github.com/luke-chang/js-spatial-navigation這是一個通用的空間導航庫。它應該能夠與Angular輕鬆集成。

你可能也想看看這個與SO：Navigate the UI using only keyboard

並聲稱有空間導航這個角度的電視應用程序：https://github.com/ahmednuaman/angular-tv-app

來源

2016-12-07 16:56:13 Pre101

我正在嘗試使用角度4創建電視應用程序，但無法使用'js-spacial-navigation'。有關如何使用它的任何想法？ – Santosh

angular2：如何僅用鍵盤控制整個應用程序？

回答

相關問題