1. 程式人生 > >IONIC即將離開當前頁面時,強制給出提示

IONIC即將離開當前頁面時,強制給出提示

   即將離開當前頁面,當不符合要求時,強制給出提示

                                    符合要求時,直接退出當前頁面

          當用戶在當前頁面改動過資料,可以給出提示,提示 :資料尚未儲存,確認離開?,未改動時,則沒有此提示

  //用於標記是否離開本介面
  bolConfirm:boolean = true;

  //全域性變數,為true表示符合條件
  //預設可以離開本介面
  bolPage:boolean = true;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
 
     }

   //系統方法,即將離開當前頁面時,觸發此事件
  ionViewCanLeave() {

    if (this.bolPage) {    
      return true;
    } else if (this.bolConfirm) {    
      return true;
    } else {
      new Promise((resolve, reject) => {

        //建立彈框
        let alert = this.alertCtrl.create();  
 
        //設定彈框內容
        alert.setSubTitle('Are you sure to quit?');

        //增加按鈕  no
        alert.addButton({
          text: 'no',
          role: 'cancle',   
          handler: () => {
            this.bolConfirm= false;
            resolve("false");
          }
        });

        //增加按鈕  yes
        alert.addButton({
          text:'yes',
          handler: () => {
            this.bolConfirm = true;
            resolve("true");
          }
        });

        //彈出該彈框
        alert.present(alert);

      }).then((r) => {
        if (this.bolConfirm) {
          // 當點選確認後彈出當前檢視,
          // 此時,在執行一遍 ionViewCanLeave 函式檢視
          //才真正被彈出。
          this.navCtrl.pop();
        }
      });
    }

    // 由於AlertController是非同步執行的,
    // 所以在得到非同步執行結果前阻止檢視離開
    return false;
  }