Angular ngx引导:如何从嵌套模式获取数据?
我有一个角度组件,它使用Angular ngx引导:如何从嵌套模式获取数据?,angular,ngx-bootstrap,Angular,Ngx Bootstrap,我有一个角度组件,它使用ngx引导的BsModalService服务显示模式。我可以使用content属性将数据传递给嵌套组件。到目前为止,这种方法效果良好 在这个模式上,有一个按钮应该打开另一个模式来提示用户输入(textarea)。当用户在第二个模式上按submit时,两个模式都必须关闭,父组件必须调用REST服务并传递在textarea中捕获的原因(通过第二个模式) 我已经完成了所有工作,但无法找到一种干净的方法将文本区域的值传递给原始组件 如果您能就如何将数据从第二个嵌套模态返回到父组件
ngx引导的BsModalService
服务显示模式。我可以使用content
属性将数据传递给嵌套组件。到目前为止,这种方法效果良好
在这个模式上,有一个按钮应该打开另一个模式来提示用户输入(textarea)。当用户在第二个模式上按submit时,两个模式都必须关闭,父组件必须调用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();
}
}
在parentComponent的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">×</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>
&时代;
你就要拒绝了
请提供理由:
提交
以下是第一个ModalComponent的相关代码:
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();
}
}
导出类FirstModalComponent实现OnInit{
@ViewChild(BsModalRef)RejectedReasonModel:BsModalRef;
构造函数(私有modalService:BsModalService,公共bsModalRef:bsModalRef){
}
私有modalConfig={
是的,
键盘:错,
背景:没错,
ignoreBackdropClick:true
};
showRejectionModal(模板:TemplateRef){
this.rejectedReasonModel=this.modalService.show(seconModel,Object.assign({},this.modalConfig,{class:'modal sm'}));
}
拒绝付款(){
this.modalService.setDismissReason(“拒绝”);
this.rejectedReasonModel.hide();
this.bsModalRef.hide();
}
}
如何将数据从第二个嵌套模式返回到父组件中?您可以在共享数据服务中共享数据