将数据从子模态框传递到父级

Question

当我创建了一个SeleccionServicioComponentMD模态窗口（子级）时，我使用了这种方式：https://valor-software.com/ngx-bootstrap/#/modals#service-component。

在子组件中有一个按钮。当它被点击时:
1) 父组件应该关闭此子窗口。
2) 父组件应该显示另一个模态窗口。

我的尝试是：子组件（模态窗口）发送一个事件给其父组件，但：
3) 父组件没有将<app-seleccion-servicio-component>标签包含在其HTML中，因为其子组件是动态创建的。那么，父组件从其子组件接收发出的事件的位置在哪里呢？

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

我卡在这一点上。我不知道如何实现父组件监听其没有<app-seleccion-servicio-component>标签的子组件发出的事件。

- Abelardo León González

---

请问您能否添加您组件（父级）和您的模态框（子级）代码？ - Francesco Borzi

请查看此答案。 - Aravind

@ShinDarth，我的错误是： @Output() myevent = new EventEmitter<any>();而不是：public event: EventEmitter<any> = new EventEmitter();这个对我起作用了！最好的祝福。 - Abelardo León González

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

- IlyaSurmay

---

嗨@IlyaSurmay，`openModalWithComponent() { this.bsModalRef = this.modalService.show(MyModalComponent); this.bsModalRef.content.title = '带组件的模态框'; this.bsModalRef.content.list = list; setTimeout(() => { list.push('利润!!!'); }, 2000);this.bsModalRef.content.event.subscribe(data => { console.log('子组件的事件被触发:', data); }); }`导致：错误类型：无法读取未定义的“subscribe”属性 在AppComponent.openModalWithComponent (app.component.ts:31) - Abelardo León González

你能否创建一个带有复制功能的 Plunkr？现在看起来你还没有在子组件中创建 EventEmitter。 - IlyaSurmay

对我有用！谢谢。 这个条目已经被正确解决了! ;) - Abelardo León González

它之前是可以工作的，但为什么在 Angular 9.1.3 中不能工作了呢？((错误信息：它不是一个函数) - Sras

我错过了事件对象的“public”关键字。 - Tusar

Answer 2

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

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>

- Udara Seneviratne