(如何)我可以从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

模态的关闭按钮可以调用NgbActivitModel.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承诺。结果值可以在"success"回调中检索，在该回调中可以调用父组件的任何方法：

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

有关演示，请参阅此stackblitz。