将数据从子模式传递给父模式

Question

当我创建一个 SeleccionServicioComponentMD 模态窗口（子）时，我是这样使用的：https : //valor-software.com/ngx-bootstrap/#/modals#service-component

里面的孩子有按钮。当它被点击时：
1) 父母应该关闭这个孩子。
2）父级应该显示另一个模态。

我的尝试：子项（模态）向其父项发出事件，但是：
3）父项<app-seleccion-servicio-component>在其 HTML 中没有包含标记，因为其子项是动态创建的。那么，父级在哪里侦听其子级发出的这个事件？

预期的结果是：
4）点击子组件内部的按钮。
5) 父级关闭这个子级（模态窗口）。
6) 父级显示另一个模态窗口。

7）我被困在这一点上。我不知道该怎么做才能让父级侦听其父级发出的没有<app-seleccion-servicio-component>标记的事件。

Answer 1

不看你的代码就不能说太多，但你可以在你的子组件中创建一个 EventEmitter 并从父组件订阅它。

示例：https : //plnkr.co/edit/b6qHpolJmUFy7dYvYpkJ?p=preview

  /* CHILD COMPONENT */
  public event: EventEmitter<any> = new EventEmitter();

  triggerEvent() {
    this.event.emit({data: 12345});
  }

  /* PARENT COMPONENT */
 this.bsModalRef.content.event.subscribe(data => {
    console.log('Child component\'s event was triggered', data);
 });

Answer 2

与 Angular 7 相关，我可以按如下方式管理该场景。

父组件.ts

bsModalRef: BsModalRef;

 loadModal() {
    const initialState = {
      title: 'Appointments'
    };

    this.bsModalRef = this.modalService.show(ModalComponent, {
      initialState,
      class: 'modal-lg'
    });

    this.bsModalRef.content.messageEvent.subscribe(data => {
      console.log('Child component\'s event was triggered', data);
    });
  }

父组件.html

<button type="button" (click)="loadModal()">Open Modal</button>

模态组件.ts

 @Output() messageEvent = new EventEmitter<string>();

private submit(){
let msg = "Test Message";
    this.messageEvent.emit(msg);
    this.bsModalRef.hide()
  }

模态组件.html

<button (click)="submit()">Submit</button>