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