如何关闭所有离子 2 模态？答案

【问题标题】：how to close all ionic 2 modals?如何关闭所有离子 2 模态？
【发布时间】：2017-11-15 04:41:51
【问题描述】：

当设备进入空闲状态时，我需要关闭所有当前模态弹出窗口并在 ionic 2 应用程序中注销用户。

我使用以下方法关闭 home 组件中的弹出窗口。

this.viewController.dismiss().then(_ => {
  console.log("modal dismiss");
}).catch(error => {
  console.log(error)
});

和

this.navController.popAll().then(_ => {
  console.log("modal dismiss");
}).catch(error => {
 console.log(error);
})

但它会引发以下错误 您无法删除导航堆栈中的所有页面。 nav.pop() 可能被调用了太多次。

并且不会关闭任何弹出窗口。有人知道怎么做吗？

【问题讨论】：

标签： javascript ionic2 angular2-template

【解决方案1】：

viewController.dismiss() 只关闭current Modal。这意味着您必须保留对所有打开模式的引用并在每个模式上调用 dismiss()。

您可以设置使用navController.setRoot(LoginPage) (link) 来显示登录页面。

【讨论】：

除了强制设置根页面之外，还有其他方法吗？我们可以使用一些共享服务或类似的东西来关闭所有模式吗？ @robbannn

【解决方案2】：

这对我有用

  constructor(public navCtrl: NavController,public ionicApp: IonicApp){} 

  this.viewCtrl.dismiss().then(_=>{
  let activePortal = this.ionicApp._modalPortal.getActive()
  if (activePortal) {
    activePortal.dismiss(); //can use another .then here
  }
});

【讨论】：

【解决方案3】：

我们可以创建一个递归函数，它接受当前活动的模态引用并关闭该模态，之后我们将在 dismiss() 事件中再次调用该函数。这是代码，

递归函数

public dismissAllModal () {
        let activeModal = this.ionicApp._modalPortal.getActive();
        if (activeModal) {
            activeModal.dismiss().then(() => {
                this.dismissAllModal()
            });
        }
    }

调用我们应该删除所有模态的函数（我放在构造函数的登录页面中）

this.viewCtrl.dismiss().then(_ => {
            this.dismissAllModal()
        })

【讨论】：

【解决方案4】：

好的，我遇到了同样的问题，我就这样解决了。解决方案是将使用服务的所有模式实例存储在一个数组中。然后使用一个循环并关闭所有从该数组中引用它们的模态。

modal.html

    <ion-button (click)="openModal()"> Open Modal <ion-button>
    <ion-button (click)="close()"> Close Modals <ion-button>

modal.service.ts

modalInst=[];
i=0;

storeModal(x)
{
       this.modalInst[this.i]=x;
       this.i++;
}

modal.ts

openModal()
{
    var modal = await this.viewCtrl.create({
    component: ModalPage
   });

 this.service.storeModal(modal);// storing modal instances in an array
   return await modal.present();
}

close()
    {
        for(var i=0; i< this.service.modalInst.length; i++)
         {
            this.service.modalInst[i].dismiss();
         }
    }

【讨论】：