使用箭头键的 Angular2 导航

Posted 2023-02-22

【中文标题】使用箭头键的 Angular2 导航

【英文标题】：Angular2 Navigation using Arrow Keys

【发布时间】：2016-07-06 16:06:30

【问题描述】：

我正在处理一个 Angular2 项目，其中我有一个项目列表，然后单击任何项​​目使用项目详细信息组件显示其详细信息页面。我正在尝试找到一种方法，允许用户使用左右箭头键导航项目。

所以，我有一个项目列表，例如，当用户单击列表中的第一个项目时，它会显示项目详细信息，我现在想要的是，当用户按下右箭头键时，它应该自动加载下一个项目的详细信息在列表中。

我有两个组件 ItemsListComponent 和 ItemDetailsComponent 每个都有自己的路由，ItemDetailsComponent 有一个参数 id。我有存储在 ItemsService 中的项目列表。

我在 ItemDetails 组件中有两个按钮来显示 Next 和 Previous item，每个都绑定到 showNext(id) 和 showPrevious(id) 函数在同一个组件上。

一切正常，但我无法将右/左箭头 KeyPress 事件链接到 showNext(id) 和 showPrevious(id) 函数。

我想到了一种方法，即在组件构造函数中使用 addEventListener 在文档上添加事件侦听器，但这似乎不是一个优雅的解决方案。

任何与此相关的帮助将不胜感激。

PS：我没有使用 jQuery，所以寻找纯 Angular2 解决方案

【问题讨论】：

请添加一些代码来演示您尝试完成的工作。

感谢 Gunter 的评论，经过一番尝试和尝试，我找到了答案，它所需要的就是在 ItemDetailsComponent 的主 div 上： (window:keydown)="onKey($event)"

【参考方案1】：

经过一番尝试和尝试，我找到了答案，它只需要在我的 ItemDetailsComponent 的主 div 上：

(window:keydown)="onKey($event)"

【讨论】：

我发现只是 (keydown)="onKey($event)" 似乎也可以工作

另外，如果您有任何验证，最好使用 keyup 代替，因为验证将在正确选择的选项上工作，而不是像 keydown 那样在先验选项上工作。不过也没有考虑或测试按键。

顺便说一句，您的原始答案极大地帮助了我，非常感谢 Naveed