如何在Ionic的选项卡上更改导航警卫？

Question

我正在使用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(); 
    } 

Answer 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; 
    } 

希望这会有所帮助。