Angular NgbModal，如何正确关闭模态window？

Question

我正在开发一个 Angular 应用程序，使用 NgbModal 来处理模态。我对如何正确关闭使用此组件实现的模式有一些疑问（直到现在我总是使用 PrimeNg 而不是 ng-bootstrap）。

基本上我是这样做的（而且它似乎工作正常）：在我的 TypeScript 代码中我有这样的东西：

async post(): Promise<void> {
    this.submitted.next(true);
    try {
      await this.setAddress();
      this.modalService.dismissAll();
    } catch (e) {
      console.error('Storage upload error', e);
      this.submitted.next(false);
    }
}

基本上当提交 post 时调用此方法。 setAddress() 方法将表单值保存在数据库中（调用另一个服务方法）。然后模态关闭。它似乎工作正常，但我有以下疑问：

如您所见，为了关闭我的模式，我使用了 dismissAll() 方法。检查文档：https://ng-bootstrap.github.io/#/components/modal/api

它还指示我无法在我的代码中使用的 close() 方法。正在尝试：

this.modalService.close();

IDE 对我说：

Property 'close' does not exist on type 'NgbModal'.ts(2339)

为什么官方文档中有这个方法，而我的代码中没有？第一次使用的方法(dismissAll())对吗？它正在工作，但我对方法名称中的这个“全部”有一些疑问。为什么是“全部”？它让我认为它正在关闭所有模态，而不仅仅是一个模态（在我的用例中，我的页面中只有一个模态，所以它无关紧要，但我不确定我是否正在实施正确的逻辑来关闭我的模态）

Answer 1

您可能正在寻找 this class 的 close 方法。您需要将 NgbActiveModal 注入组件而不是 NgbModal 服务。

我使用 close 方法优雅地关闭模态。当你想 return 一个错误到 opener 时，你可以使用 dismiss 方法，当有多个活动模式实例时，你可以使用 dismissAll 方法。

Answer 2

您必须设置您打开的模态的引用

喜欢

this.modalReference = this.modalService.open(modalComponent);

然后关闭

this.modalReference.close();

Angular NgbModal，如何正确关闭模态window？

Angular NgbModal, how to correctly close a modal window?

angular

ng-bootstrap

ng-bootstrap-modal

ng-modal