Angular，如何屏蔽与父组件的键盘交互

Question

环境

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

问题

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

问题

如何防止这种行为？

Answer 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>

Answer 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 键（目标之间的 Tab 键）。

关于辅助功能的说明

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

Angular，如何屏蔽与父组件的键盘交互

Angular, how to block the keyboard interaction with the parent component

router

keyboard-events

router-outlet

angular

angular-router