angular - (如何)我可以从 NgbModal 模态调用父组件函数吗？

Question

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

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

父级中的当前代码(简化):

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 promise 。可以在“成功”回调中检索结果值，在其中可以调用父组件的任何方法:

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

有关演示，请参阅 this stackblitz。