@ViewChild(Nav) nav: Nav;
constructor(private platform: Platform, private toastCtrl: ToastController, private alertCtrl: AlertController) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need
platform.registerBackButtonAction(() => {
//uncomment this and comment code below to to show toast and exit app
// if (this.backButtonPressedOnceToExit) {
// this.platform.exitApp();
// } else if (this.nav.canGoBack()) {
// this.nav.pop({});
// } else {
// this.showToast();
// this.backButtonPressedOnceToExit = true;
// setTimeout(() => {
// this.backButtonPressedOnceToExit = false;
// },2000)
// }
if(this.nav.canGoBack()){
this.nav.pop();
}else{
if(this.alert){
this.alert.dismiss();
this.alert =null;
}else{
this.showAlert();
}
}
});
});
}
showAlert() {
this.alert = this.alertCtrl.create({
title: 'Exit?',
message: 'Do you want to exit the app?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
this.alert =null;
}
},
{
text: 'Exit',
handler: () => {
this.platform.exitApp();
}
}
]
});
alert.present();
}
showToast() {
let toast = this.toastCtrl.create({
message: 'Press Again to exit',
duration: 2000,
position: 'bottom'
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
24
离子最新版本3.xx
app.component.ts 文件：
import { Platform, Nav, Config, ToastController } from 'ionic-angular';
constructor(public toastCtrl: ToastController, public platform: Platform) {
platform.ready().then(() => {
//back button handle
//Registration of push in Android and Windows Phone
var lastTimeBackPress = 0;
var timePeriodToExit = 2000;
platform.registerBackButtonAction(() => {
// get current active page
let view = this.nav.getActive();
if (view.component.name == "TabsPage") {
//Double check to exit app
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
this.platform.exitApp(); //Exit from app
} else {
let toast = this.toastCtrl.create({
message: 'Press back again to exit App?',
duration: 3000,
position: 'bottom'
});
toast.present();
lastTimeBackPress = new Date().getTime();
}
} else {
// go to previous page
this.nav.pop({});
}
});
});
}
14
这是我已经解决并运作的代码 . 谢谢大家 .
constructor(platform: Platform,public alertCtrl: AlertController,public toastCtrl:ToastController) {
platform.ready().then(()=>{
platform.registerBackButtonAction(()=>this.myHandlerFunction());
StatusBar.styleDefault();
Splashscreen.hide();
})
}
myHandlerFunction(){
let toast = this.toastCtrl.create({
message: "Press Again to Confirm Exit",
duration: 3000
});
toast.present();
}
// I am using this.isExitAlertOpen just to make sure that the alert does not open if already open.
handleBackButton() {
this.platform.registerBackButtonAction(() => {
// const activePortal =
// this.ionicApp._modalPortal.getActive() ||
// this.ionicApp._loadingPortal.getActive() ||
// this.ionicApp._toastPortal.getActive() ||
// this.ionicApp._overlayPortal.getActive();
// console.warn('ACTIVE PORTALS', activePortal);
const activeModal = this.ionicApp._modalPortal.getActive();
console.warn('MODAL', activeModal);
activePortal can be used to find the relevant active portals which includes alert, loader, modal, etc. If you want to handle everything with the back button or some of them uncomment according to your usage
在我的情况下，我只想检查模态是否有效，所以我只检查了模态 .
// if (activePortal) {
// activePortal.dismiss();
// }
if (activeModal) {
activeModal.dismiss();
} else if (this.nav.canGoBack()) {
this.nav.pop();
} else {
if (this.isExitAlertOpen) return;
this.isExitAlertOpen = true;
this.showExitAlert();
}
});
}
showExitAlert() {
this.alertCtrl.create({
title: 'Exit',
message: 'Are you sure you want to exit the app?',
enableBackdropDismiss: false,
buttons: [
{
text: 'Yes',
handler: () => {
this.isExitAlertOpen = false;
this.platform.exitApp();
}
}, {
text: 'Cancel',
role: 'cancel',
handler: () => {
this.isExitAlertOpen = false;
}
}
]
}).present();
}
7 回答
在app.component.ts中
离子最新版本3.xx
app.component.ts文件：这是我已经解决并运作的代码 . 谢谢大家 .
Platform api有一个处理程序
registerBackButtonAction.你可以这样做：
在app.component.ts中
HTML：
打字稿：
有点迟到了...但除了关闭推送的页面之外，还有更多的后退按钮，特别是对于带有多个标签页的项目 .
有时页面不会被推入根页面，而是在其中一个标签页的navCtrl中 . 所以我们必须检查所有这些 .
此外，如果没有打开任何页面或菜单，我们应该绕过最近使用的选项卡（类似于Instagram应用程序）并返回上一个选项卡 . 此外，我们不应该多次回到每个标签（类似于Instagram）
我从这里得到了答案的灵感，并创建了一个处理所有必要功能的综合方法：
Side menu ：如果侧面菜单已打开，则关闭它
Pushed pages ：关闭任何可能已在任何标签页的导航控制器上推送的页面
Switch between tabs ：如果菜单已关闭，并且没有推送页面，则应使用堆栈将用户带回上一个最近使用的选项卡 .
Show alert ：如果之前没有最近使用的选项卡，则警告框应询问用户是否要退出 .
细节在blog post
可以从my github下载演示代码 .
我通过大量研究设法创造了这个功能 . 希望能帮助到你 .
activePortal can be used to find the relevant active portals which includes alert, loader, modal, etc. If you want to handle everything with the back button or some of them uncomment according to your usage
在我的情况下，我只想检查模态是否有效，所以我只检查了模态 .