我正面临着如何处理默认移动设备后退按钮的问题，该按钮在退出应用程序时检查确认，如果我按下后退按钮，则应调用一些显示弹出窗口的处理程序，以确认退出。或者有任何方法调用registerBackButtonAction（）？或者是如何在IONIC 2中使用它？请帮帮我。提前致谢。
在app.component.ts中
@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();
}
Ionic最新版本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({});
}
});
});
}
这是我已经解决并运作的代码。谢谢大家。
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();
}
Platform api有一个处理程序registerBackButtonAction。
你可以这样做：
在app.component.ts中
constructor(platform: Platform){
platform.ready().then(()=>{
platform.registerBackButtonAction(()=>this.myHandlerFunction());
})
myHandlerFunction(){
//create alert
}
HTML：
<button (click)="exitApp()">Close application<button>
打字稿：
import {Platform} from 'ionic-angular';
@Page({ /*...*/ })
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
}
exitApp(){
this.platform.exitApp();
}
}
有点迟到了...但除了关闭推送的页面之外，还有更多的后退按钮，特别是对于带有多个标签页的项目。
有时页面不会被推入根页面，而是在其中一个标签页的navCtrl中。所以我们必须检查所有这些。
此外，如果没有打开任何页面或菜单，我们应该围绕最近使用的选项卡（类似于Instagram应用程序）并返回上一个选项卡。此外，我们不应该多次回到每个标签（类似于Instagram）
我从这里得到了答案的灵感，并创建了一个处理所有必要功能的综合方法：
细节在这个blog post
可以从my github下载演示代码。
我通过做大量的研究设法创造了这个功能。希望能帮助到你。
// 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可用于查找相关的活动门户，包括警报，加载程序，模态等。如果您想使用后退按钮处理所有内容，或者其中一些根据您的使用情况取消注释
在我的情况下，我只想检查模态是否有效，所以我只检查了模态。
// 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();
}