ngbModal as a generic Confrimation Box

回眸只為那壹抹淺笑 提交于 2019-12-23 07:36:34

问题


I am trying to create generic confirmation box using ngbmodal, which will be used across the App. In which, Title and message will be passed to the modal from the calling component. I created as a DialogService and added in the entryComponents. Now I am able to show the Confirmation box. But not able to get the result. Below is the code to show the ConfirmationBox component. How to get the value from it

    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();

回答1:


There are many easy ways of achieving this but I would suggest one that is the simplest and the most effective IMO: resolve modal's result promise with the user's choice. This is as simple as doing following in the component representing modal's content (notice activeModal.close(...)):

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

Afterwards you can get back user's answer from the result promise of the NgbModalRef (notice 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}`)
    });        
  }

You can see all this in action in the following plunker: http://plnkr.co/edit/yYIx1m1e2nfK0nxFwYLJ?p=preview



来源:https://stackoverflow.com/questions/43611743/ngbmodal-as-a-generic-confrimation-box

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!