将数据从 child 模式传递到 parent

Question

我在创建SeleccionServicioComponentMD模态window(child)时，是这样使用的：https://valor-software.com/ngx-bootstrap/#/modals#service-component

child里面有按钮。单击时：
1) parent 应该关闭这个 child.
2) parent 应该显示另一个模式。

我的尝试：child（模式）向其 parent 发出一个事件但是：
3) parent 没有在其 HTML 中包含 <app-seleccion-servicio-component> 标签，因为它的 child 是动态创建的。那么，parent 从它的 children 哪里监听这个发出的事件？

预期结果是：
4) 单击 child 组件内的按钮。
5) parent 关闭此 child（模态 window）。
6) parent 显示另一个模态 window。

7）我坚持这一点。我不知道如何让 parent 监听它的 parent 发出的没有 <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

关于Angular7，我可以按如下方式管理场景。

parent-component.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);
    });
  }

parent-component.html

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

modal-component.ts

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

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

modal-component.html

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

将数据从 child 模式传递到 parent

Passing data from the child modal to the parent

modal-dialog

ngx-bootstrap

angular5