在Ionic 2中移除导航栈内模态框及特定页面打开的模态框

你遇到的这种场景我很熟悉——跳转页面后打开了模态框，倒计时结束要跳转新页面时得把这个模态框关掉对吧？这里给你几个精准解决的方法：

方法一：持有模态框实例直接关闭（最推荐） #

打开模态框的时候把实例存下来，倒计时结束时直接调用它的dismiss()方法，再执行页面跳转。这种方式能精准控制你要关闭的那个模态框，不会影响其他可能存在的弹窗：

// 先在页面里定义变量保存模态框实例
private targetModal: Modal;

// 打开模态框时保存实例
openTargetModal() {
  this.targetModal = this.modalCtrl.create(YourModalComponent);
  this.targetModal.present();
}

// 倒计时结束的处理逻辑
onCountdownFinish() {
  // 先判断模态框是否存在且处于打开状态
  if (this.targetModal) {
    this.targetModal.dismiss().then(() => {
      // 模态框关闭完成后再跳转页面
      this.navCtrl.push(EndPage);
    });
  } else {
    // 没有模态框直接跳转
    this.navCtrl.push(EndPage);
  }
}

方法二：通过导航栈索引移除模态框 #

要是你没保存模态框实例，可以利用当前模态框的ViewCtrl获取它在导航栈中的位置，然后从栈中移除来关闭它：

onCountdownFinish() {
  this.navCtrl.push(EndPage).then(() => {
    // 获取当前模态框在导航栈的索引
    const modalIndex = this.viewCtrl.index;
    // 移除该索引对应的模态框
    this.navCtrl.remove(modalIndex);
  });
}

这里要注意，viewCtrl.index对应的是当前模态框在导航栈里的位置，调用remove会直接把它从栈中移除，从而触发关闭。

方法三：一键关闭所有模态框（适合批量场景） #

如果你不确定页面上有多少模态框打开，或者需要一次性关闭所有弹窗，可以用ModalController的dismissAll()方法：

onCountdownFinish() {
  this.modalCtrl.dismissAll().then(() => {
    this.navCtrl.push(EndPage);
  });
}

不过这个方法是全局关闭所有模态框，如果你只想关闭特定页面打开的那一个，前两种方法会更精准。

小提醒 #

• 记得在操作前判断模态框是否处于打开状态，避免出现不必要的报错；
• 把页面跳转放在模态框关闭的then()回调里，确保模态框完全关闭后再执行跳转，能避免界面卡顿或者异常。

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