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

问题描述

我正在开发一个使用 NgbModal 处理模态的 Angular 应用程序。我对如何正确关闭使用此组件实现的模态有一些疑问（直到现在我总是使用 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);
    }
}

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

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

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

this.modalService.close();

IDE 对我说：

'NgbModal'.ts(2339) 类型不存在属性 'close'

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

解决方法

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

我使用 close 方法优雅地关闭模态。当您想向开启程序返回错误时，您可以使用 dismiss 方法，当有多个活动 moda 实例时，您可以使用 dismissAll。

,

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

喜欢

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

然后关闭

this.modalReference.close();