2017-09-13 99 views
2

我有一个使用BsModalService服务ngx-bootstrap显示模式的Angular组件。我可以使用content属性将数据传递给我的嵌套组件。这到目前为止效果很好。ngx bootstrap:如何从嵌套Modal获取数据?

在这种模式下,有按钮应该打开另一个模式来提示用户输入(textarea)。当用户按下第二个模式提交时,两个模块都必须关闭,父组件必须调用REST服务并传递textarea中捕获的原因(通过第二个模式)。

我得到了一切工作,但无法找出一个干净的方式将文本区域的值传递给原始组件。

希望得到关于如何从第二个嵌套模态返回到父组件的数据的建议和意见。

这里是我的代码(进口/其他代码冷落/改名为简洁起见):

在父组件:

export class parentComponent { 

@ViewChild(BsModalRef) firstModal: BsModalRef; 

promptUserForVerification() { 
    this.firstModal = this.modalService.show(FirstModalComponent, Object.assign({}, this.modalConfig, {class: 'modal-lg'})); 
    this.firstModal.content.setActionId(someId); 
    this.firstModal.content.refreshDisplay(); 
} 

}

在为父级的HTML模板:

<!--plain HTML code for first Modal--> 

<ng-template #secondModal> 
    <div class="modal-header"> 
     <span class="fa fa-times-circle-o"></span> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="closeRejectionReasonModal()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
    </div> 
    <div class="modal-body rejection-body"> 
     <div class="body-title-container"> 
      <h5 class="title-with-border d-inline">You are about to reject </h5> 
     </div> 
     <span class="small">Please provide a reason :</span> 
     <div class="reason"> 
     <!-- NEED THIS VALUE IN PARENT COMPONENT --> 
      <textarea id="" cols="24" rows="3" class="w-100" required></textarea> 
     </div> 

    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" (click)="rejectPayment()">Submit</button> 

    </div> 

</ng-template> 

以下是firstModalComponent的相关代码:

export class FirstModalComponent implements OnInit { 


@ViewChild(BsModalRef) rejectedReasonModal: BsModalRef; 
constructor(private modalService: BsModalService, public bsModalRef: BsModalRef) { 

} 

private modalConfig = { 
    animated: true, 
    keyboard: false, 
    backdrop: true, 
    ignoreBackdropClick: true 

}; 
showRejectionModal(template: TemplateRef<any>) { 
    this.rejectedReasonModal = this.modalService.show(seconModal, Object.assign({}, this.modalConfig, {class: 'modal-sm'})); 
} 
rejectPayment() { 

    this.modalService.setDismissReason("REJECTED"); 

    this.rejectedReasonModal.hide(); 
    this.bsModalRef.hide(); 

} 
} 

如何从第二个嵌套模态中将数据返回到父组件中?

回答