Начальная загрузка ngx: как получить данные из вложенного модала?

У меня есть компонент Angular, который отображает модальное окно с использованием службы BsModalService ngx-bootstrap. Я могу передавать данные моему вложенному компоненту, используя свойство content. Пока это работает хорошо.

В этом модальном окне есть кнопка, которая должна открыть другое модальное окно, чтобы запросить у пользователя ввод (текстовое поле). Когда пользователь нажимает «Отправить» в этом втором модальном окне, оба модальных окна должны быть закрыты, а родительский компонент должен вызывать службу REST и передавать причину, зафиксированную в текстовой области (через второе модальное окно).

У меня все работает, но я не могу найти чистый способ передать значение текстовой области исходному компоненту.

Буду признателен за ввод и предложения о том, как вернуть данные из второго вложенного модального окна обратно в родительский компонент.

Вот мой код (импорт/другой код опущен/переименован для краткости):

В родительском компоненте:

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-шаблоне parentComponent:

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

}
}

Как вернуть данные из второго вложенного модального окна в родительский компонент?


person MojoJojo    schedule 13.09.2017    source источник


Ответы (1)