当没有元素具有焦点时，Angular 组件是否可以捕获 keydown 事件？答案

【问题标题】：Possible for an Angular component to capture a keydown event when no element has focus?当没有元素具有焦点时，Angular 组件是否可以捕获 keydown 事件？
【发布时间】：2020-04-24 01:24:32
【问题描述】：

我有一个类似网格的组件作为我页面上唯一的活动元素。网格是使用设置为display: flex 的 div 构建的，我想捕获各种键盘事件，例如箭头键以在网格中的不同单元格上设置突出显示（使用 ngClass），我不确定但不确定我可以在哪里当没有单元格有焦点时捕获 keydown 事件。该问题特别适用于将一系列单元格设置为“选择区域”但没有一个单元格具有焦点的场景。我在要显示为“选定”的单元格上设置突出显示没有问题，但如果没有焦点，我不知道在哪里可以捕获键盘箭头键事件以选择或扩展选择范围。（类似说，shift ArrowRight在excel中的结果。

【问题讨论】：

监听window上的keydown？
如何访问组件内的窗口？
如果你没有焦点，那么你可以默认设置在你的第一个单元格上
如果可以避免，我不想将焦点设置在第一个 div 元素上，因为 Angular 会将蓝色焦点边框放在具有焦点的单元格上
在封闭标签上设置keydown事件不起作用？喜欢<div (keydown)="..."> ... cell divs ... </div>

标签： angular

【解决方案1】：

我决定通过在我的网格上创建一个虚拟根元素来解决这个问题用这个 css 显示它何时被选中。

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

然后我向这个元素添加了一个按键监听器来捕获箭头键事件。

【讨论】：