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