0

我正在使用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) 上不存在属性“关闭”

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

4

2 回答 2

2

您可能正在寻找此类close的方法。您需要将其注入您的组件而不是服务。NgbActiveModalNgbModal

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

于 2021-06-10T16:35:14.570 回答
1

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

喜欢

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

然后关闭

this.modalReference.close();
于 2021-06-10T16:39:56.393 回答