Предупреждение перед тем, как покинуть страницу (перейти назад) с помощью Ionic v2

Question

Как вы показываете alert, что пользователь должен закрыть, прежде чем вернуться на предыдущую страницу? Я использую стандарт <ion-navbar *navbar>стрелка.

Я попытался закреплять в NavController событие ionViewWillLeave как это, но он не работает:

ionViewWillLeave() { 
    let alert = Alert.create({ 
    title: 'Bye', 
    subTitle: 'Now leaving', 
    buttons: ['OK'] 
    }); 
    this.nav.present(alert); 
} 

Это показывает предупреждение, но не возвращается назад, когда он будет закрыт. Если я прокомментирую это, кнопка возврата работает нормально.

Answer 1

UPDATE

По Ionic2 RC, теперь мы можем использовать Nav Guards.

In some cases, a developer should be able to control views leaving and entering. To allow for this, NavController has the ionViewCanEnter and ionViewCanLeave methods. Similar to Angular 2 route guards, but are more integrated with NavController

Так что теперь мы можем сделать что-то вроде этого:

someMethod(): void { 
    // ... 
    this.showAlertMessage = true; 
} 

ionViewCanLeave() { 
    if(this.showAlertMessage) { 
     let alertPopup = this.alertCtrl.create({ 
      title: 'Exit', 
      message: '¿Are you sure?', 
      buttons: [{ 
        text: 'Exit', 
        handler:() => { 
         alertPopup.dismiss().then(() => { 
          this.exitPage(); 
         });   
        } 
       }, 
       { 
        text: 'Stay', 
        handler:() => { 
         // need to do something if the user stays? 
        } 
       }] 
     }); 

     // Show the alert 
     alertPopup.present(); 

     // Return false to avoid the page to be popped up 
     return false; 
    } 
} 

private exitPage() { 
    this.showAlertMessage = false; 
    this.navCtrl.pop(); 
} 

Я предпочитаю использовать this.showAlertMessage свойство, так что мы можем иметь больше контроля над тем, когда нам нужно, чтобы показать предупреждение, если пользователь пытается выйдите из страницы. Например, у нас может быть форма на странице, и если пользователь не внес каких-либо изменений, мы не хотим показывать предупреждение (this.showAlertMessage = false), и если форма была фактически изменена, мы хотим показать предупреждение (this.showAlertMessage = true)

---

OLD ОТВЕТ

Через несколько часов борются с этим, я нашел решение.

Один вопрос, который мне пришлось столкнуться, что ionViewWillLeave выполняется также, когда alert закрыт, так что делает вещи более сложными (когда view собирается быть закрыт, потому что вы нажали кнопку назад, то alert показывает вверх, но когда вы нажмете ok, это снова запустит событие и снова откроет alert и так далее ...).

Другое дело, иметь в виду, что ActionSheets и Alerts добавляются в navigation stack, так this.nav.pop() вместо удаления текущего вида из стека, удаляет alert (и из-за того, что мы можем чувствовать, что это не работает должным образом).

При этом, решение я нашел:

import {Component} from '@angular/core'; 
import {NavController, NavParams, Alert} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/mypage/mypage.html', 
}) 
export class MyPage{ 

    // .... 

    confirmedExit: boolean = false; 

    constructor(private nav: NavController, navParams: NavParams) { 
     // ... 
    } 

    ionViewWillLeave() { 
     if(!this.confirmedExit) { 
      let confirm = Alert.create({ 
       title: 'Bye', 
       message: 'Now leaving', 
       buttons: [ 
       { 
        text: 'Ok', 
        handler:() => { 
         this.exitPage(); 
        } 
       } 
       ] 
      }); 
      this.nav.present(confirm); 
     } 
    } 

    public exitPage(){ 
     this.confirmedExit = true; 
     this.nav.remove().then(() => { 
      this.nav.pop(); 
     }); 
    } 


    } 

Итак:

• Я использую confirmedExit переменную, чтобы знать, если вы уже нажали кнопку ОК (так что вы подтвердили вас хотел выйти из страницы, и с этим я знаю, что в следующий раз при запуске события ionViewWillLeave мне не нужно показывать alert)
• В методе exitPage сначала я сделайте this.nav.remove(), чтобы удалить alert из стека, и как только это будет сделано, мы сделаем this.nav.pop(), чтобы вернуться на предыдущую страницу.

---

Answer 2

Принятое решение не работает в RC3, вот новый один с помощью Nav Controller «s Nav Guard:

ionViewCanLeave(): Promise<void> { 
    return new Promise((resolve, reject) => { 
    let confirm = this.alertCtrl.create({ 
     title: 'Are you sure?', 
     message: 'Bunnies will die :(', 
     buttons: [{ 
     text: 'OK', 
     handler:() => { 
      resolve(); 
     }, 
     }, { 
     text: 'Cancel', 
     handler:() => { 
      reject(); 
     } 
     }], 
    }); 
    confirm.present(); 
    }) 
} 

Если вы осуществляете навигацию с помощью нажим() на контроллере нав, вам также нужно сделать уловку, иначе он выкинет необработанную ошибку:

this.navCtrl.push(SomePage).catch(() => {});