Angular CDK A11y 焦点陷阱模式/对话框

Question

我正在拼命寻找在 Angular 8 应用程序中将焦点陷阱添加到我的模态的最佳方法。我偶然发现了 Angular Material CDK 并仅为 A11y 辅助工具安装了它，但我不知道如何导入和使用 FocusTrap或 FocusTrapFactory .

如果我尝试将其中一个添加到我的 declarations或 imports @NgModule 中的数组我得到错误。将它们安装在 providers什么也没做。我在文档中没有看到关于如何专门使用这些工具的内容。我有 cdkTrapFocus , cdkFocusRegionStart , cdkFocusInitial和 cdkFocusRegionEnd所有设置都在模态中进行测试。我试过只是拉入FocusTrap和 FocusTrapFactory只进入我的组件，但仍然没有。

https://v8.material.angular.io/cdk/a11y/overview#focuskeymanager

有没有人成功地让它工作？如果我必须使用 Material UI 工具来使其工作，我将需要找到另一种解决方案来在我的模态中捕获焦点。

我的模态组件是一个简单的包装器，我通过服务的 ID 打开和关闭。基本上就像:https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box

Answer 1

你需要做的就是从模块中的 cdk 导入 a11y 模块

import { A11yModule } from '@angular/cdk/a11y';

imports: [
   A11yModule  
]

将焦点陷阱指令添加到对话框内容的父元素例如下面是投影对话内容的片段

  <div class="modal-content" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
    <ng-template *ngTemplateOutlet="contentsTmpl"></ng-template>
  </div>

编辑

只要有 Angular 注入(inject)的 dom 元素包含模态内容，它就可以工作。 https://jasonwatmore.com/post/2019/07/12/angular-8-custom-modal-window-dialog-box示例有问题。

本例中创建的模态始终存在于 dom 中，并且 cdk 自动焦点捕获会在元素被创建或销毁时捕获焦点!

我稍微修改了这个例子，它工作正常。这是修改后的例子

https://stackblitz.com/edit/angular-8-custom-modal-dialog-focustrap?file=src/app/_modal/modal.component.html