ngx bootstrap:如何从嵌套的Modal中获取数据?

时间:2017-09-13 16:58:32

标签: angular ngx-bootstrap

我有一个Angular组件,它使用Section .text global _start _start: jmp short GotoCall shellcode: pop esi xor eax, eax mov byte [esi + 7], al lea ebx, [esi] mov long [esi + 8], ebx mov long [esi + 12], eax mov byte al, 0x0b mov ebx, esi lea ecx, [esi + 8] lea edx, [esi + 12] int 0x80 GotoCall: call shellcode db '/bin/shJAAAAKKKK' BsModalService服务显示模态。我可以使用ngx-bootstrap属性将数据传递给我的嵌套组件。这到目前为止运作良好。

在这个模态上,有一个按钮,它应该打开另一个模态来提示用户输入(textarea)。当用户在第二个模态上按下提交时,必须关闭两个模态,父组件必须调用REST服务并传递在textarea中捕获的原因(通过第二个模态)。

我已经完成了所有工作,但无法找到将文本区域的值传递给原始组件的简洁方法。

非常感谢有关如何将数据从第二个嵌套模式返回到父组件的输入和建议。

这是我的代码(为了简洁而省略/重命名的导入/其他代码):

在父组件中:

content

}

在parentComponent的HTML模板中:

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

这里是firstModalComponent的相关代码:

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

如何将数据从第二个嵌套模式返回到父组件?

1 个答案:

答案 0 :(得分:1)

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

中共享数据