Question

您建议使用键盘控制整个应用程序的方法是什么？我发现Spotlight lib，但它依赖于enyojs，它似乎有自己的组件模型，整体enyojs似乎是一种矫枉过正。

到目前为止，我正在监听@HostListener('window:keydown', ['$event']) onKeydown(event: any) { event.preventDefault(); this.mainKeydownHandler.handle(event.keyCode); }中的keydown事件：

MainKeydownHandler

想要处理keydown事件的每个组件都注册到MainKeydownHandler的处理程序，并且当keydown事件发生时document.activeElement将事件委托给注册的处理程序。适当的处理程序由MainKeydownHandler的{{1}}类确定（我没有找到更多＆＃34; angular2-like＆＃34;获取当前关注元素的方法）@ViewChildren('selectable') elements: QueryList<ElementRef>;＆＃39;处理方法。所以现在我必须为我想要关注的一组元素添加适当的类名。

此外，组件处理程序获取所有可选元素：

#selectable

所以我需要为我想要关注的每个元素添加keyCode和ID为handler的类。然后，组件处理程序接收MainKeydownHandler并确定接下来要选择的元素，或者从另一个组件返回到先前选择的元素，依此类推。

这种方法看起来很尴尬，当新组件想要处理keydown事件时会涉及相当多的代码，并且存在组件完全失去焦点的情况：当我从某个列表中删除项目然后重新呈现此组件时（某些服务）或@Deployment public static WebArchive createDeployment() { WebArchive war = ShrinkWrap.create(WebArchive.class).addClass(Test.class) .addAsManifestResource(new File("jboss-deployment-structure.xml")) .addAsWebInfResource(EmptyAsset.INSTANCE, "beans.xml"); return war; }可以记住，但这可能导致在浏览用户组件的过程中记住很多元素。）

是否有一种更好，更简单，更通用，更具声明性的方式来控制整个angular2应用程序只使用键盘（keydown / keyup事件）？

或者，对于这个用例，使用带有angular2的Spotlight（使用enyojs dep。）是否合理？你可以提供有角度2 +聚光灯的工作用的喷射器。我无法让这两个人一起工作。

Answer 1

如果要启用基本键盘导航，可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='class1'> <div class='class2'> <div class='class3'> some text </div> <div class='class4'> some text </div> </div> </div>执行此操作，这是执行此操作的标准方法。请参阅specification

tabindex

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>事件，并使用javascript手动keydown元素。来回导航会更容易，而不是直接找到布局中当前元素上下的元素。您将不得不比较x，y坐标或偏移。

focus()

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;
}

Answer 2

您可以查看https://github.com/luke-chang/js-spatial-navigation它是一个通用的空间导航库。它应该能够与Angular轻松集成。

您可能还想查看此相关的SO：Navigate the UI using only keyboard

这款Angular TV应用程序声称具有空间导航功能：https://github.com/ahmednuaman/angular-tv-app

angular2：如何用键盘控制整个应用程序？

2 个答案: