Angular 角度，如何阻止键盘与父组件的交互

环境

我的angular应用程序上有一个大的组件树，其中有多个组件，可以在每个级别上显示特定的组件。最深层是管理特定信息的模式

问题

如果可以看到，我可以通过鼠标阻止从我的子组件到父组件事件的交互（父组件） 但当我使用键盘时，我能够导航到父组件并在所有父组件中选择选项

问题

---

如何防止这种行为？

Angular CDK提供了一个名为cdkTrapFocus的指令，用于防止焦点移动到dom节点及其子节点之外。他们在MatDialog中使用此功能，效果非常好

如果您不想切换到使用MatDialog，或者您需要在对话框以外的其他布局中使用它，您可能需要考虑使用cdkTrapFocus：

---

它应该像导入和声明指令一样简单，然后

您可以实现一些粗略的事件绑定，如下所示：


document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
//标签，上，下，左，右
如果（e.keyCode==“9”| e.keyCode==“38”| e.keyCode==“40”| e.keyCode==“37”| e.keyCode==“39”）{
控制台日志（“阻止”）；
e、 停止即时复制（）；
e、 预防默认值（）；
}
}
谢谢，我会看看他们是如何执行指令的，这样我们就可以遵循同样的指令了approach@Ricardo如果这是正确答案，请将其标记，使其不再出现在未应答队列中。根据文档，cdkTrapFocus不会阻止对话框外的鼠标交互。它只会捕获焦点，您还需要一个覆盖层来防止下面的所有鼠标动作，这相当于CDKTRAPPORCE on mobile accessibility reader？这是可以做到的，但想法是在模式中使用键盘（顶部有一个特定的路由器出口的层）并封锁通往另一个的通道outlets@Ricardo因此，他们需要在应用程序中明确使用箭头键，而不是作为导航媒介？这不是系统的要求，而是增加可访问性的功能。。当你开发一个应用程序时，想一想，帮助人们完成任务而不只是使用鼠标，并且如果是一个表单，你需要允许按键，那么我确实说过这是一个粗糙的方法。@Ricardo请参阅我关于可访问性的说明。