Comment puis-je utiliser une garde de nav sur un changement d'onglet dans Ionic?

Question

J'utilise Ionic 2. J'ai l'avis que l'utilisateur devrait être invité à confirmer qu'il veut quitter lorsqu'il navigue (une vidéo est en cours de lecture, et c'est probablement une navigation accidentelle).

J'ai ce beau travail lorsque l'utilisateur clique sur le bouton de retour en haut nav, ou bouton matériel arrière (Android), en utilisant le code suivant:

// 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(); 
     } 
    }); 
    } 

La vue se trouve dans un onglet. En cliquant sur un autre onglet n'appelle pas cette fonction, l'utilisateur n'est pas invité et l'onglet bascule juste.

Comment cette invite peut-elle également être affichée sur un onglet? Cette vue n'est pas une page de l'onglet racine.

-

J'ai essayé d'utiliser ionViewWillLeave(), qui est fait appel à un changement onglet, mais il ne permet pas un moyen d'empêcher l'utilisateur de commutation. Le code ci-dessous ne afficher l'invite, mais après l'onglet a changé:

// 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

Vous n'avez pas besoin d'une promesse pour cela, il vous suffit de retourner true ou false si l'utilisateur est en mesure de quitter la page, donc s'il veut partir et confirmez ceci dans l'alerte vous définissez votre allowedToLeave à vrai et sautez votre page, il appellera ionViewCanLeave encore mais cette fois il n'entrera pas votre instruction 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; 
    } 

Espérons que cela aide.