Angular2 Навигация с помощью клавиш со стрелками

Question

Я работаю над проектом Angular2, в котором у меня есть список элементов, и нажатие любого элемента отображает его страницу с деталями, используя компонент детали товара. Я пытаюсь найти способ разрешить пользователям перемещаться по элементам с помощью клавиш со стрелками вправо и влево.

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

У меня есть два компонента ItemsListComponent и ItemDetailsComponent каждый со своим собственным маршрутом, ItemDetailsComponent имеет идентификатор параметра. И у меня есть список предметов, хранящихся в ItemsService.

У меня есть две кнопки в компоненте ItemDetails для отображения Следующий и предыдущий элементы привязываются к showNext (id) и showPrevious (id) на одном компоненте.

Все работает нормально, но я не могу связать событие KeyPress справа/слева со стрелками showNext (id) и showPrevious (id).

Я думал об одном подходе, который добавляет прослушиватель событий, используя addEventListener в документе, в конструкторе компонента, но это не кажется элегантным решением.

Любая помощь, связанная с этим, будет высоко оценена.

PS: Я не использую JQuery так ищет чистый раствор Angular2

Answer 1

С некоторым хитом и судом, я нашел ответ, все это было нужно, это на моей основной DIV в ItemDetailsComponent:

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