Angular，如何阻止与父组件的键盘交互答案

【问题标题】：Angular, how to block the keyboard interaction with the parent componentAngular，如何阻止与父组件的键盘交互
【发布时间】：2018-03-15 15:43:47
【问题描述】：

环境

我的 Angular 应用程序上有一个很大的组件树，有多个路由出口来显示每个级别的特定组件。最深层次是管理某些信息的模式。

问题

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

问题

如何防止这种行为？

【问题讨论】：

标签： angular router keyboard-events angular-router router-outlet

【解决方案1】：

Angular CDK 提供了一个名为 cdkTrapFocus 的指令，它可以防止焦点移动到 dom 节点及其子节点之外。他们在 MatDialog 中使用它，效果很好。

如果您不想切换到使用 MatDialog 或者您需要在对话框以外的其他布局中使用它，您可能想考虑单独使用 cdkTrapFocus：https://github.com/angular/material2/blob/3aceb7361cc34ad987f7b1ca39339d3203248341/src/cdk/a11y/focus-trap/focus-trap.ts#L340

应该像导入和声明指令一样简单，然后<div cdkTrapFocus></div>

【讨论】：

谢谢，我会看看他们是如何实现指令的，所以我们可以遵循相同的方法
@Ricardo 如果这是正确答案，请标记它，以便它不再出现在未回答队列中。
根据文档，cdkTrapFocus 不会阻止对话框外的鼠标交互。
它只会捕获焦点，是的，您还需要一个叠加层来防止其下方的所有鼠标操作
移动无障碍阅读器上有没有相当于cdkTrapFocus的？

【解决方案2】：

你可以像这样实现一些粗略的事件绑定：

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;

    // tab, up, down, left, right
    if (e.keyCode == '9' || e.keyCode == '38' || e.keyCode == '40' || e.keyCode == '37' || e.keyCode == '39') {
        console.log("prevent");
        e.stopImmediatePropagation();
        e.preventDefault();
    }
}

这将完全阻止使用页面上的箭头键，以及 tab 键（在目标之间切换。）

关于可访问性的说明

@Ricardo 的一位 cmets 指出，这是一种非常糟糕的可访问性方法。我认为重要的是要记住，许多有可访问性问题的人会使用像Jaws 这样的程序来浏览网页。这些程序在 Web 应用程序之外捕获击键，然后将这些操作传播到浏览器。阻止 keydown 事件不会阻止这一点 - JAWS 专门将用户的 keydown 事件转换为 focus 事件。

【讨论】：

可以做到，但想法是在模态中使用键盘（在顶部带有特定路由器出口的层）并阻止对其他出口的访问
@Ricardo 所以他们需要在应用程序中明确使用箭头键，而不是作为导航媒介？
不是系统的要求，但功能增加了可访问性。。在开发应用程序时，很好地考虑一下，帮助人们在不使用鼠标的情况下完成任务，如果是在模态中形成您需要允许按键
我确实说过这是一种粗略的方法。
@Ricardo 请参阅我关于可访问性的说明。