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