使用箭头键的 Angular2 导航

Question

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

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

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

我在 ItemDetails 组件中有两个按钮，用于显示下一个和上一个项目，每个按钮都绑定(bind)到同一组件上的 showNext(id) 和 showPrevious(id) 函数。

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

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

非常感谢与此相关的任何帮助。

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

Answer 1

经过一些尝试和尝试，我找到了答案，它所需要的只是在 ItemDetailsComponent 的主 div 上:

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