首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >有键盘导航的角材料表-听所有的按键事件,除了来自覆盖组件的事件。

有键盘导航的角材料表-听所有的按键事件,除了来自覆盖组件的事件。
EN

Stack Overflow用户
提问于 2021-03-12 20:09:38
回答 1查看 1.7K关注 0票数 0

为了选择表中的行,我尝试用键盘交互实现一个。

对于键盘交互,我使用了来自Cdk's- a11y模块的a11y,同时,keydown事件被附加到主机(mat-table)上。

代码语言:javascript
复制
this.keyManager = new FocusKeyManager<MatRowFocusableDirective>(
  this.rows
).withHomeAndEnd();


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

在这一点上,一切正常。

但我希望扩展键盘交互,类似于Gmail的web应用程序:

  • 文档中的任意键按(向上/向下箭头)上,我希望在表中启动导航: @HostListener("document:keydown","$event")公共onKeydownHandler(事件: KeyboardEvent):void {this.keyManager.onKeydown(事件);}

这是可行的,但在应用程序中,我还使用了建立在CDK覆盖上的其他角度材料组件,如对话框、Selects、Bottomsheets等。

问题是,当打开这些组件之一时,表中的键盘交互仍然可用。

当打开任何CDK覆盖组件时,如何禁用表中的键盘交互?

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

EN

回答 1

Stack Overflow用户

发布于 2021-03-18 22:42:41

您可以尝试以下几种方法:

  1. 创建一个具有shouldFocusOnKeyboard属性的服务(按您的需要命名)。
  2. 使用cdkMonitorSubtreeFocuscdkMonitorElementFocus检测表外的元素何时收到焦点。
  3. 在应用监视指令的每个元素上,使用cdkFocusChange事件更改shouldFocusOnKeyboard的值。
  4. 使用新服务确定是否将document:keydown事件传递给keyManager

基于CDK的焦点监控

专业提示:

更好的设计可能是将shouldFocusOnKeyboard创建为一个BehaviorSubject<boolean>,并在您的事件处理程序中调用它。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66606562

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档