将组件加载到模态内部并传递回数据

Question

我有一个组件A，该组件具有一个按钮，该按钮将启动一个呈现组件B的模态对话框。在模态对话框中，用户可以在组件b中执行某些操作，并且我希望在对话时，组件A中可以访问组件b中的值解雇。

a.component.html

<ng-template #lookupCustomerDialog let-modal>
    <div class="modal-body">
        <form>
        <div class="form-group">
            <app-component-b></app-component-b>
        </div>
        </form>
    </div>
</ng-template>

当用户关闭上面的对话框时，我希望app-component-b中的值在组件a中可用

Answer 1

我正在使用EventEmitter解决此问题

ComponentA.ts

export class ComponentA implements OnInit {
    sampleFunc(data: any) {
        /*your codes that using data from component b*/
    }
}

ComponentB.ts

import {Component, OnInit, Output, EventEmitter} from '@angular/core';
export class ComponentA implements OnInit {
    @Output() sendDataEvent = new EventEmitter();
    myData;
    onSendDataFunc() {
        this.sendDataEvent.emit(this.myData);
    }
}