angular2: как управлять всем приложением только клавиатурой?

Question

Какой подход вы бы рекомендовали контролировать всего приложения только с клавиатуры? Я нашел Spotlight lib, но это зависит от enyojs, который, похоже, имеет свою собственную модель компонента, а общий enyojs кажется излишним.

До сих пор я слушаю на KeyDown событий в app.component.ts:

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

Каждый компонент, который нужно обрабатывать KeyDown события регистров MainKeydownHandler «S обработчиков и когда KeyDown событие MainKeydownHandler делегатов встречается, мероприятие для зарегистрированного обработчика , Соответствующий обработчик определяется классом document.activeElement (я не нашел больше «углоподобного» способа получения текущего сфокусированного элемента) в методе обработки MainKeydownHandler. Поэтому теперь я должен добавить соответствующее имя класса в группу элементов, которые я хочу сосредоточить.

Кроме того, обработчик компонента получает все выбираемые элементы с:

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

так что мне нужно добавить #selectable и класс с идентификатором обработчика к каждому элементу я хочу сосредоточиться. Затем обработчик компонента получает keyCode и определяет, какой элемент выбрать следующий, или вернуться к ранее выбранному элементу из другого компонента и так далее.

Этот подход кажется неудобным, требует довольно много кода, когда новый компонент хочет обрабатывать события keydown, и есть ситуации, когда компонент полностью теряет фокус: когда я удаляю элемент из некоторого списка, а затем этот компонент перезагружен (некоторые сервис или MainKeydownHandler, помните, но это могло привести к довольному количеству элементов, которые нужно запомнить по пути навигации пользователя через компоненты).

Есть ли лучший, более простой, более общий и более декларативный способ управления целым угловым приложением только с клавиатурой (события keydown/keyup)?

В качестве альтернативы, разумно ли использовать Spotlight (с enyojs dep.) С угловым2 для этого прецедента? И можете ли вы предоставить рабочий плункер с угловым2 + прожектором. Я не мог заставить этих двух работать вместе.

Answer 1

Если вы хотите включить базовую навигацию по клавиатуре, вы можете сделать это с помощью 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>

Если вы хотите сделать это с помощью клавиш со стрелками, вы должны будете слушать keydown события на документе и вручную 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>

Answer 2

Вы можете посмотреть на https://github.com/luke-chang/js-spatial-navigation Это общая пространственная навигация библиотека. Он должен быть легко интегрирован с Угловым.

Вы также можете проверить это, связанные с SO: Navigate the UI using only keyboard

И это Угловое приложение TV, которое претендует иметь пространственную навигацию: https://github.com/ahmednuaman/angular-tv-app