Возможно ли для компонента Angular захватить событие нажатия клавиши, когда ни один элемент не имеет фокуса?

Question

У меня есть компонент в виде сетки как единственный активный элемент на моей странице. Сетка построена с элементами div, установленными на display: flex, и я хотел бы захватывать различные события клавиатуры, такие как клавиши со стрелками, чтобы установить подсветку (используя ngClass) для разных ячеек сетки, я не уверен, но не уверен, где я могу захватить событие keydown, когда ни одна из ячеек не имеет фокуса. Проблема является особой для сценария, где диапазон ячеек установлен как «область выбора», но ни одна из которых не имеет фокуса. У меня нет проблем с установкой выделения в ячейках, которые я хочу показать как «выбранные», но если ни у одного из них нет фокуса, я не знаю, где я могу перехватить события клавиш со стрелками на клавиатуре, чтобы выбрать или расширить диапазон выделения. (похоже сказать, результат shift ArrowRight в Excel.

Answer 1

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

#root-element:focus {
    outline: none;
}

Затем я добавил слушателя с нажатой клавишей вниз к этому элементу для захвата событий клавиши со стрелкой.