Estoy trabajando en un proyecto Angular2 en el que tengo una lista de elementos y hago clic en cualquier elemento para mostrar su página de detalles utilizando el componente de detalles del elemento. Estoy tratando de encontrar una manera de permitir a los usuarios navegar por los elementos con las teclas de flecha derecha e izquierda.

Entonces, tengo una lista de elementos y cuando, por ejemplo, el usuario hace clic en el primer elemento de la lista, muestra los detalles del elemento, lo que quiero ahora es que cuando el usuario presione la tecla de flecha derecha, cargue automáticamente los detalles del siguiente elemento de la lista .

Tengo dos componentes ItemsListComponent y ItemDetailsComponent, cada uno con su propia ruta, ItemDetailsComponent tiene un ID de parámetro. Y tengo una lista de elementos almacenados en un ItemService.

Tengo dos botones en el componente ItemDetails para mostrar los elementos Next y Previous, cada uno de los cuales se une a showNext (id) y showPrevious (id) en el mismo componente.

Todo funciona bien, pero no puedo vincular el evento KeyPress de flecha derecha / izquierda a las funciones showNext (id) y showPrevious (id).

Pensé en un enfoque que es agregar un detector de eventos usando addEventListener en el documento, en el constructor de componentes, pero esto no parece ser una solución elegante.

Cualquier ayuda relacionada con esto sería muy apreciada.

PD: no estoy usando jQuery, así que busco una solución Angular2 pura