上一篇: angular – 与Select / Options和... 下一篇:angularjs – Angular：范围变量...

angular – ngbModal作为通用的Confrimation Box

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angular – ngbModal作为通用的Confrimation Box，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试使用Ngbmodal创建通用确认框,它将在整个应用程序中使用.其中,标题和消息将从调用组件传递给模态.我创建了一个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();

解决方法

有很多简单的方法可以实现这一点,但我建议一个最简单和最有效的IMO：用户的选择解决模态的结果承诺.这就像在表示模态内容的组件中执行以下操作一样简单(注意activeModal.close(…))：

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

之后,您可以从NgbModalRef的结果承诺中获取用户的答案(@L_72_20@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}`)
    });        
  }