ngbModal 作为一个通用的 Confrimation Box答案

【问题标题】：ngbModal as a generic Confrimation BoxngbModal 作为一个通用的 Confrimation Box
【发布时间】：2017-09-22 12:44:57
【问题描述】：

我正在尝试使用 ngbmodal 创建通用确认框，它将在整个应用程序中使用。其中，Title 和 message 将从调用组件传递给 modal。我创建为 DialogService 并添加到 entryComponents。现在我可以显示确认框。但无法得到结果。下面是显示 ConfirmationBox 组件的代码。如何从中获取价值

    const modalRef = this.modalService.open(ConfirmationBoxComponent,{backdrop:"static"})
    modalRef.componentInstance.name = "Message";
    modalRef.componentInstance.confirmationBoxTitle = "Confirmation?"
    modalRef.componentInstance.confirmationmessage = "Do you want to cancel?"
    modalRef.componentInstance.changeRef.markForCheck();

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

有许多简单的方法可以实现这一点，但我建议一种最简单和最有效的 IMO：根据用户的选择解决模态的 result 承诺。这就像在表示模态内容的组件中执行以下操作一样简单（注意activeModal.close(...)）：

<button (click)="activeModal.close(true)">Yes</button>
<button (click)="activeModal.close(false)">No</button>

之后，您可以从NgbModalRef 的result 承诺中取回用户的答案（通知modalRef.result.then）：

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.confirmationBoxTitle = 'Confirmation?';
    modalRef.componentInstance.confirmationMessage = 'Do you want to cancel?';

    modalRef.result.then((userResponse) => {
      console.log(`User's choice: ${userResponse}`)
    });        
  }

您可以在以下插件中查看所有这些操作：http://plnkr.co/edit/yYIx1m1e2nfK0nxFwYLJ?p=preview

【讨论】：