使用箭头键进行Angular2导航

Question

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

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

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

我在ItemDetails组件中有两个按钮,用于显示Next和Previous项,每个都绑定到showNext(id),showPrevious(id)函数在同一个组件上.

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

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

任何与此相关的帮助都将受到高度赞赏.

PS:我没有使用jQuery,所以寻找一个纯粹的Angular2解决方案

Answer 1

通过一些命中和试验,我找到了答案,所有它需要的是我在ItemDetailsComponent的主要div上:

(窗口:的keydown)= "安其($事件)"