ngx bootstrap: How to get data from nested Modal?

问题

I have an Angular component that displays a modal using the BsModalService service of ngx-bootstrap. I can pass data to my nested component using the content property. This works well so far.

On this modal, there is button which should open up another modal to prompt the user for input (textarea). When the user presses submit on this second modal, both the modals must be closed and the parent component must call a REST service and pass the reason captured in the textarea(via the second modal).

I got everything to work but can't figure out a clean way to pass the value of the text area to the original component.

Would appreciate inputs and suggestions on how to get the data back from the second nested modal back to the parent component.

Here's my code (imports/other code left out/renamed for brevity):

In the parent component:

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

}

In parentComponent's HTML template:

<!--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>

Here's the relevant code for the 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();

}
}

How do I get data back from the second nested modal into the parent component?

回答1:

You can share data in a shared data service https://angular.io/tutorial/toh-pt4

来源：https://stackoverflow.com/questions/46203111/ngx-bootstrap-how-to-get-data-from-nested-modal

标签

angular

ngx-bootstrap