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

【问题标题】：Angular NgbModal, how to correctly close a modal window?Angular NgbModal，如何正确关闭模态窗口？
【发布时间】：2021-06-10 16:10:53
【问题描述】：

我正在开发一个使用 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()）是否正确？它正在工作，但我对方法名称中的“全部”有一些疑问。为什么是“全部”？它让我认为它正在关闭所有模式，而不仅仅是一个模式（在我的页面中的用例中，只有一个模式，所以它无所谓，但我不确定我是否正在实施正确的逻辑来关闭我的模态）

【问题讨论】：

标签： angular ng-bootstrap ng-bootstrap-modal ng-modal

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你必须设置你打开的模式的参考

喜欢

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

然后关闭

this.modalReference.close();

【讨论】：