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

Question

为了使页面符合 ADA，我们需要能够通过“打开”按钮上的任一 clicking/space/enter 打开 ng-bootstrap (ngbModal) 模式弹出窗口。

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

模态页面内：

<button>Close</button>

在关闭按钮上按 enter 键关闭模式，返回调用 div 元素并重新执行 ENTER 键并再次打开模式。我试过 stoppropagation, return false, cancelbubble inside the openModal function and inside the modal itself 无济于事，绑定的 ENTER 键一直冒泡 up/down 两个页面。

Answer 1

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

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

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

How to avoid key binding propagation inside ng-bootstrap ngbModal component?

bootstrap-modal

keypress

ng-bootstrap

stoppropagation