У меня есть компонент 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">×</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();
}
}
Как вернуть данные из второго вложенного модального окна в родительский компонент?