ionic 後退確認

  Ionic 導航欄返回確認設置：
（1）使用重寫 backButtonClick 函數，該函數在點擊導航欄返回鍵時執行

第一步： 導入 Navbar、 AlertController等對象、以及 ViewChild 指令
import { Component , ViewChild} from '@angular/core';
import { ActionSheetController, AlertController, NavController, ViewController, Navbar } from 'ionic-angular';
第二步：獲取導航欄組件 navbar 
@ViewChild(Navbar) navBar: Navbar;
(模板：<ion-navbar #navBar>   </ion-navbar>)
第三步：在視圖加載完（ionViewDidLoad）或
    視圖將要進入（ionViewWillEnter）的時候重寫 backButtonClick 函數
ionViewDidLoad/ionViewWillEnter(){
    this.navBar.backButtonClick 
        = this.backButtonClick;
}
backButtonClick = (e) => {
    new Promise((resolve, reject) => {
      let alert = this.alertCtrl.create();
      alert.setTitle('溫馨提示');
      alert.setMessage('確定退出？');
      alert.addButton({
        text: '取消',
        role: 'cancle',
        cssClass: 'secondary',
        handler: () => {
          resolve(false);

        }
      });
      alert.addButton({
        text: '確定',
        handler: () => {
          resolve(true);
        }
      });

      alert.present(alert);
    }).then((result) => {
      console.log(result)
        if(result){
          this.navCtrl.pop();
        }
    });
}

（2）在 視圖將要離開（ionViewWillLeave）時判斷視圖離開是由什麼事件導致的，並做相應的判斷。（該方法將會執行兩次 ionViewWillLeave 函數）

第一步：定義變量
// 視圖離開是由點擊下一步導致
next: boolean = false;
// 視圖離開是否是由確定返回導致
testConfirmOpen: boolean = false; 
/*
 * 當頁面進入時，修改返回按鈕的顯示
 */
ionViewWillEnter() {
    // 在頁面進入時設置後退按鈕的內容
    this.viewCtrl.setBackButtonText('');
    // 在頁面進入時恢復狀態，即將next設爲 false 防止，
    // 由別的頁面返回到該頁面是，next 爲 true。
    this.next = false;
}
第二步：實現返回確認
ionViewCanLeave(){
    if(this.next){ 
        // 是否是由點擊下一步導致的視圖離開
      return true;
    } else if(this.testConfirmOpen){
        // 是否確認返回
      return true;
    } else{
      /*
      * 退出創建窗口時的提示框
      */

      new Promise((resolve, reject) => {
        let alert = this.alertCtrl.create();
        alert.setTitle('溫馨提示');
        alert.setMessage('確定退出？');
        alert.addButton({
          text: '取消',
          role: 'cancle',
          cssClass: 'secondary',
          handler: () => {
            this.testConfirmOpen = false;
            resolve("false");

          }
        });
        alert.addButton({
          text: '確定',
          handler: () => {
            this.testConfirmOpen = true;
            resolve("true");
          }
        });

        alert.present(alert);
      }).then((r) => {
        console.log(r)
          if(this.testConfirmOpen){
            // 當點擊確認後彈出當前視圖，
            // 此時，在執行一遍 ionViewCanLeave 函數視圖
            //才真正被彈出。
            this.navCtrl.pop();
          }
      });
    }
    // 由於AlertController是異步執行的，
    // 所以在得到異步執行結果前阻止視圖離開
    return false;
}

由於AlertController是異步執行的所以下面代碼得不到想要的結果：

ionViewCanLeave(){
    if(this.next){ 
        // 是否是由點擊下一步導致的視圖離開
      return true;
    } else{
        back();
        if(this.testConfirmOpen){
            return true;
        } else{
            return false;
        }
    }
}

back() {
    let alert = this.alertCtrl.create();
    alert.setTitle('溫馨提示');
    alert.setMessage('確定退出？');
    alert.addButton({
        text: '取消',
        role: 'cancle',
        cssClass: 'secondary',
        handler: () => {
            this.testConfirmOpen = false;   
        }
    });
    alert.addButton({
        text: '確定',
        handler: () => {
            this.testConfirmOpen = true;
        }
    });

    alert.present(alert);
 }