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方法，并将模式结果值作为参数：

row_to_json

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

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

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

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

有关演示，请参见this stackblitz。

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

1 个答案: