ng-bootstrap(NgbModal)：有没有办法有条件地阻止模态关闭？答案

【问题标题】：ng-bootstrap(NgbModal): Is there any way to conditionally prevent a modal from closing?ng-bootstrap(NgbModal)：有没有办法有条件地阻止模态关闭？
【发布时间】：2020-06-24 22:20:46
【问题描述】：

我有一个非常基本的模式，用于让用户输入注释

openNotes(conquest) {
    const modalRef = this.modalService.open(EditNotesModalComponent);
    modalRef.result.then((result) => {
      console.log('closed', result);
    },
    (reason) => {
      console.log('dismissed', reason);
    });
    return modalRef;
}

我想做的是，如果用户在有未完成的笔记时关闭模态，显示另一个模态，提醒他们有未保存的工作，如果他们关闭模态，这些工作将丢失。我希望用户能够选择继续编辑（在这种情况下，第二个模式将关闭，而第一个模式将保持打开状态）或放弃他们的工作（在这种情况下，两个模式都将关闭）。

将这样的内容连接到自定义模式关闭操作很容易，例如用户手动单击通常会关闭模式的按钮。我遇到的问题是，我似乎无法知道用户何时通过在模式外部单击或按 ESC 键来关闭模式。

在 UibModal for AngularJS 中，您可以通过以下方式捕获此类事件：

$scope.$on('modal.closing', (event) => {
      if (this.newNote.length > 0) {
        event.preventDefault();
        this.openConfirmModal();
      }
});

然后，根据确认模式的解析方式，可以决定关闭模式还是保持打开状态。 Angular 4 中的 NgbModal 是否可能出现这样的情况？

谢谢！

编辑：我知道 NgbModalOptions 中的 beforeDismiss 函数，但是 AFAIK 你不能将任何参数传递给这个函数。我希望只有当用户在模态中有未完成的笔记时才会弹出确认模态。

【问题讨论】：

stackoverflow.com/questions/41438160/… 的可能重复项
·让 ngbModalOptions: NgbModalOptions = { 背景 : 'static', keyboard : false };· console.log(ngbModalOptions); const modalRef = this.modalService.open(NgbdModalContent, ngbModalOptions);
@AhammadaliPK 我希望用户能够通过 ESC 或单击背景关闭模式，但如果他们有任何未保存的工作，我想显示确认模式。
ESC 右击时无法捕捉事件？
@AhammadaliPK 我无法捕获按下 ESC 和用户在模式外单击的事件。

标签： javascript angular ng-bootstrap

【解决方案1】：

您可以使用@Viewchild 获取模态框中输入字段的引用，然后使用beforeDimiss 函数获取用户输入的文本。

以下示例有一个带有 <textarea> 的模态框，当模态框被关闭时（通过单击背景或按 ESC），文本区域中的值将记录到控制台。

HTML

在 HTML 中，将模板引用变量添加到输入字段：

<div class="modal-body">
  <textarea #myTextarea></textarea>
</div>

模态组件 TypeScript

在模态组件TS文件中，使用@ViewChild获取输入字段的引用：

@ViewChild('myTextarea') textarea;

父组件打字稿

在打开modal的组件中，添加如下beforeDimiss函数。 modalRef.componentInstance.textarea.nativeElement.value 行将从输入字段中获取值：

open() {
  const modalRef = this.modalService.open(NgbdModalContent, {
     beforeDismiss: () => {
      console.log('The text typed by the user before the modal was dimissed was:')
      console.log(modalRef.componentInstance.textarea.nativeElement.value)
      return true;
    }
  });
}

请参阅this StackBlitz 进行演示。

【讨论】：