如何在 Ionic 的标签更改中使用导航守卫？答案

【问题标题】：How can I use a nav guard on a tab change in Ionic?如何在 Ionic 的标签更改中使用导航守卫？
【发布时间】：2018-02-21 21:34:16
【问题描述】：

我正在使用 Ionic 2。我认为在导航离开时应该提示用户确认他们想要离开（当时正在播放视频，可能是意外导航）。

当用户使用以下代码单击顶部导航中的后退按钮或后退硬件按钮 (Android) 时，我可以正常工作：

  // About to leave
  ionViewCanLeave() {
    this.api.getDefaultMedia().pause();

    return new Promise((resolve, reject) => {
      if(!this.allowedToLeave) {
        let confirm = this.alertCtrl.create({
          title: 'Are you sure?',
          message: 'If you leave a class you will need to start over.  Are you sure you want to leave?  If you need a break you can pause by tapping the video.',
          buttons: [{
            text: 'OK',
            handler: () => {
              this.allowedToLeave = true;
              resolve();
            },
          }, {
            text: 'Cancel',
            handler: () => {
              reject();
            }
          }],
        });
        confirm.present();
      }
    });
  }

视图位于选项卡中。点击不同的标签不会调用这个函数，所以不会提示用户，标签只是切换。

如何在选项卡更改上也显示此提示？此视图不是根标签页。

我曾尝试使用ionViewWillLeave()，它是在标签更改时调用的，但它不允许阻止用户切换。下面的代码确实显示了提示，但是在标签改变之后：

  // Called when user exits page via tab
  ionViewWillLeave() {
    this.api.getDefaultMedia().pause();

    if(!this.allowedToLeave) {
      let confirm = this.alertCtrl.create({
        title: 'Are you sure?',
        message: 'If you leave a class you will need to start over.  Are you sure you want to leave?  If you need a break you can pause by tapping the video.',
        buttons: [{
          text: 'OK',
          handler: () => {
            this.allowedToLeave = true;
            this.leave();
          },
        }, {
          text: 'Cancel',
          handler: () => {
            // Do nothing
          }
        }],
      });
      confirm.present();

      return false;
    }
  }

  // Leave the view
  leave() {
    this.navCtrl.pop();
  }

【问题讨论】：

看来你需要回报承诺。本质上是return confirm.present(); 而不是false。

标签： angular typescript ionic-framework tabs ionic2

【解决方案1】：

您不需要对此做出承诺，如果用户能够离开页面，您只需要返回 true 或 false，因此如果他想离开并在警报中确认这一点，您将 allowedToLeave 设置为true 并弹出你的页面，它会再次调用 ionViewCanLeave 但这次它不会进入你的 if 语句。

  // About to leave
  ionViewCanLeave() {
    this.api.getDefaultMedia().pause();

    if(!this.allowedToLeave) {
      let confirm = this.alertCtrl.create({
        title: 'Are you sure?',
        message: 'If you leave a class you will need to start over.  Are you sure you want to leave?  If you need a break you can pause by tapping the video.',
        buttons: [{
          text: 'OK',
          handler: () => {
            this.allowedToLeave = true;
            this.navCtrl.pop();
          },
        }, {
          text: 'Cancel',
          role: 'cancel'
        }],
      });
      confirm.present();
    };
    return true;
  }

希望这会有所帮助。

【讨论】：

ionViewCanLeave 不适用于选项卡。

【解决方案2】：

我有一个简单的单行解决方案，因为 ionViewCanLeave 不适用于选项卡。所以，你需要做的是，如果你想阻止导航，从你的 ionViewWillLeave 抛出一个简单的错误:)

ionViewWillLeave() {
  if (!this.isValidForm()) {
    this.showPrompt();
    throw new Error('Form validation error!');
  }
}

Ionic Framework 的 View Controller 将在选项卡顶部捕获此错误，这将停止导航。

【讨论】：