Angular 5 + Ionic框架下如何防止模态弹窗重复打开

这是个很常见的场景，我们只需要维护一个状态变量来跟踪弹窗的打开状态，就能轻松解决重复创建的问题。具体实现步骤如下：

• 首先在你的组件类中添加一个布尔变量，用来记录弹窗是否处于打开状态：

  private isModalOpen = false;
  

• 然后修改你的openModal()方法，在创建弹窗前先检查这个状态，如果弹窗已经打开就直接返回；同时监听弹窗关闭事件，在弹窗关闭时重置状态：

  import { ModalController} from 'ionic-angular';
  import { ModalPage } from './path-to-modal-page'; // 请替换为你的ModalPage实际路径
  
  export class YourComponent {
    private isModalOpen = false;
  
    constructor(private modalCtrl: ModalController) {}
  
    openModal() {
      // 如果弹窗已处于打开状态，直接终止方法
      if (this.isModalOpen) {
        return;
      }
  
      const modal = this.modalCtrl.create(ModalPage);
      
      // 监听弹窗关闭事件，重置状态
      modal.onDidDismiss(() => {
        this.isModalOpen = false;
      });
  
      // 标记弹窗为已打开状态
      this.isModalOpen = true;
      modal.present();
    }
  }
  

这样处理之后，不管是通过本地通知点击还是其他方式调用openModal()，只要弹窗已经处于打开状态，就不会重复创建新的弹窗了。当用户关闭弹窗（不管是手动点击关闭按钮还是点击背景区域），状态会自动重置，下次触发时依然能正常打开弹窗。

内容的提问来源于stack exchange，提问作者Shefalee Chaudhary