带键盘导航的 Angular Material Table - 收听除 Overlay 组件之外的所有 keydown 事件

如何解决带键盘导航的 Angular Material Table - 收听除 Overlay 组件之外的所有 keydown 事件

我正在尝试通过键盘交互实现一个 MatTable，以便选择表格中的行。

对于键盘交互，我使用了 FocusKeyManager's- Cdk 模块中的 a11y。此外，keydown 事件附加到主机 (mat-table)。

this.keyManager = new FocusKeyManager<MatRowFocusableDirective>(
  this.rows
).withHomeAndEnd();


@HostListener("keydown",["$event"])
public onKeydownHandler(event: KeyboardEvent): void {
 this.keyManager.onKeydown(event);
}

此时，一切正常。

但我想扩展键盘交互，类似于 Gmail 网络应用：

在文档内的任意按键（向上/向下箭头）上，我想在表格内开始导航：

@HostListener("document:keydown",["$event"])
public onKeydownHandler(event: KeyboardEvent): void {
  this.keyManager.onKeydown(event);
}

这是可行的，但是，在应用程序中，我还使用了其他基于 CDK 叠加层 的 Angular Material 组件，例如对话框、选择、Bottomsheets 等。

问题在于，当打开这些组件之一时，表格内的键盘交互仍然可用。

如何在打开任何 CDK Overlay 组件时禁用表格内的键盘交互？

演示： https://stackblitz.com/edit/angular-tspvfu-onnsdk

解决方法

您可以尝试以下操作：

创建具有 $settings = array( 'tinymce' => array('your_options') ); wp_editor($content,$editor_id,$settings); 属性的服务（按您的需要命名）。
使用 shouldFocusOnKeyboard 或 cdkMonitorSubtreeFocus 检测表格外的元素何时获得焦点。
在您应用了监控指令的每个元素上，使用 cdkMonitorElementFocus 事件更改 cdkFocusChange 的值。
使用新服务确定是否将 shouldFocusOnKeyboard 事件传递给 document:keydown。

Focus monitoring with CDK

专业提示：
更好的设计可能是将 keyManager 创建为 shouldFocusOnKeyboard 并将其通过管道传输到您的事件处理程序中。