如何避免 ng-bootstrap ngbModal 组件内的键绑定传播？

Question

为了保持页面符合 ADA，我们需要能够通过单击“打开”按钮上的/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。

<div (keyup.enter)="openModal($event)" (keyup.space)="openModal($event) (click)="openModal($event)">Open Modal</div> 

模态页面内：

<button>Close</button>

按关闭按钮上的 Enter 键将关闭模态框，返回到调用的 div 元素并重新执行 ENTER 键并再次重新打开模态框。我在 openModal 函数内和模态本身内尝试了 stoppropagation、return false、cancelbubble，但均无济于事，绑定的 ENTER 键不断在两个页面上/下冒泡。

Answer 1

我能够通过模态中的以下实现来解决它：

 @HostListener("document:keydown", ["$event"]) onKeydownHandler(
    event: KeyboardEvent
  ) {
    if(event.key === "Enter"){
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  }

Answer 2

为“document:keydown”添加 PreventDefault() 或 stopImmediatePropagation() 将会影响页面的其他正常功能。

相反，只需添加 setTimeout() 并设置 200ms 的计时器即可。