（如何）我可以从 NgbModal 模态调用父组件函数吗？

Question

我正在使用来自 @ng-bootstrap 的 NgbModal 从Angular 6 应用程序打开模态窗口。 在这些模态之一中，我希望单击按钮关闭模态并激活父/启动组件中的功能。 我怎样才能做到这一点？

我知道使用普通的子组件和父组件，您可以发出一个由父组件捕获的事件（请参阅此处的解决方案）。 我可以用我的模态设置做一些类似的事情吗？ 如果没有，这里最好的方法是什么？

父级中的当前代码（简化）：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from "...";
@Component ( {...} )
export class ParentComponent {
  ...
  constructor(private modalService: NgbModal) {}
  ...
  showModal(i:InputObject) {
    const modalRef = this.modalService.open(ModalCompoenent);
    modalRef.componentInstance.i = i;
  }
}

Answer 1

模态的关闭按钮可以调用NgbActiveModal.close方法，以模态结果值作为参数：

import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";

export class ModalComponent {
  constructor(public activeModal: NgbActiveModal) { }
}

<button type="button" (click)="activeModal.close('This is my answer')">Close</button>

---

在父组件中，您使用适当的回调处理NgbModalRef.result承诺。 可以在“成功”回调中检索结果值，在其中可以调用父组件的任何方法：

const modalRef = this.modalService.open(ModalComponent);
...
modalRef.result.then(
  (data: any) => {
    this.processData(data);
  },
  (reason: any) => { });

有关演示，请参阅此 stackblitz 。