2

我有一个 Angular 组件，它BsModalService使用ngx-bootstrap. content我可以使用该属性将数据传递给我的嵌套组件。到目前为止，这运作良好。

在这个模式上，有一个按钮应该打开另一个模式来提示用户输入（文本区域）。当用户在第二个模式上按下提交时，两个模式都必须关闭，并且父组件必须调用 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">&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();

}
}

如何将数据从第二个嵌套模式取回父组件？

4

1 回答 1

1

您可以在共享数据服务中共享数据https://angular.io/tutorial/toh-pt4

于 2017-09-13T19:41:40.700 回答