Question

我有一个非常基本的模态，用于让用户输入笔记

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

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

将这样的事情与自定义模式关闭动作连接起来很容易，例如用户手动单击通常会关闭模式的按钮。我遇到的问题是，我似乎无法通过单击模态外部或按ESC键来了解用户何时解除了模态。

在用于AngularJS的UibModal中，您可以使用以下内容捕获此类事件：

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

，然后，根据确认模式的解析方式，可以决定关闭模式还是将其保持打开状态。 Angular 4中的NgbModal可能会发生这种情况吗？

谢谢！

编辑：我知道NgbModalOptions中的beforeDismiss函数，但是AFAIK不能将任何参数传递给该函数。我希望仅当用户在模式中有未完成的注释时弹出确认模式。

Answer 1

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

下面的示例具有一个带有<textarea>的模式，并且当模式被取消时（通过单击背景或按ESC），textarea中的值将记录到控制台。

HTML

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

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

模态组件TypeScript

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

@ViewChild('myTextarea') textarea;

父组件打字稿

在打开模态的组件中，添加以下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进行演示。

ng-bootstrap（NgbModal）：有什么方法可以有条件地阻止模式关闭吗？

1 个答案: