问题描述
我正在尝试通过键盘交互实现一个 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
。
专业提示:
更好的设计可能是将 keyManager
创建为 shouldFocusOnKeyboard
并将其通过管道传输到您的事件处理程序中。