Question

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

孩子里面有按钮。单击时：
1）父母应该关闭这个孩子 2）父母应该显示另一个模态。

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

预期结果是：
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，我可以按以下方式管理场景。

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>

将子模态中的数据传递给父

2 个答案: