检查 ng 引导模式是否已经打开答案

【问题标题】：check if ng bootstrap modal is already open检查 ng 引导模式是否已经打开
【发布时间】：2021-12-29 20:49:25
【问题描述】：

如何检查模式窗口是否打开？

我这样定义一个属性

  modalInstance: NgbModalRef;

并像这样实例化模态

 this.modalInstance = this.modalService.open(UpdateModalContent);

我找不到像 this.modalReminderInstance.isOpen 这样的原生属性

【问题讨论】：

为什么不直接在打开modal的时候设置一个变量，检查一下这个变量是否打开呢？省去烦恼

标签： angular angular-ui-bootstrap ng-bootstrap

【解决方案1】：

当您设置modalInstance 时，它会返回一个promise，而当模式启动时，promise 设置为pending，当模式关闭时，promise 状态将设置为已解决或已拒绝。当一个 Promise 将解析/拒绝它的一个处理程序时，.then 方法将运行。

var isModalOpen = false;
function openModal() {
    isModalOpen = true;
    modalInstance = $uibModal.open({...})
        .result.then(function () {
            // do something when resolved
        });
}

另一种方法是利用.open为您提供的回调方法

open 方法返回一个模态实例，一个具有以下属性的对象：

opened (Type: promise) - 在下载内容模板并解析所有变量后打开模式时解析。

已关闭（类型：promise）- 当模式关闭且动画完成时解决。

var isModalOpen = false;

function openModal() {
    var modalInstance = $uibModal.open({...});

    modalInstance.opened.then(function () {
            isModalOpen = true;
        });

    modalInstance.closed.then(function () {
            isModalOpen = false;
        });
}

【讨论】：

【解决方案2】：

其实，既然你使用的是模态服务

this.modalInstance = this.modalService.open(UpdateModalContent)

您可以使用 NgbModal 类提供的“hasOpenModals”：

if (!this.modalService.hasOpenModals()) {
this.modalInstance = this.modalService.open(UpdateModalContent)
}

【讨论】：