angular – ngbModal作为通用的Confrimation Box
发布时间:2020-12-17 07:00:04 所属栏目:安全 来源:网络整理
导读:我正在尝试使用ngbmodal创建通用确认框,它将在整个应用程序中使用.其中,标题和消息将从调用组件传递给模态.我创建了一个DialogService并添加到entryComponents中.现在我可以显示确认框.但是无法得到结果.下面是显示ConfirmationBox组件的代码.如何从中获取价
我正在尝试使用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的结果承诺中获取用户的答案(通知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}`) }); } 您可以在以下plunker中看到所有这些:http://plnkr.co/edit/yYIx1m1e2nfK0nxFwYLJ?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |