我遇到了一个问题,如何处理默认移动设备的后退按钮,该按钮在退出应用程序时检查确认,如果我按下后退按钮,则应调用一些处理程序来显示弹出以确认退出。
还是有一种方法可以调用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({});
}
});
});
}
平台API有一个名为registerBackButtonAction
的处理程序。
你可以像这样做:
在 app.component.ts 中:
constructor(platform: Platform){
platform.ready().then(()=>{
platform.registerBackButtonAction(()=>this.myHandlerFunction());
})
myHandlerFunction(){
//create alert
}
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();
}
有些项目中,后退按钮不仅仅是关闭推送页面,特别是对于有多个选项卡页面的项目。
有时候一个页面被推到了选项卡页面的navCtrl中,而不是根页面。所以我们必须检查所有这些页面。
此外,如果没有打开页面或菜单,我们应该循环浏览最近使用的选项卡(类似于Instagram应用程序),并返回到上一个选项卡。此外,我们不应该多次返回每个选项卡(类似于Instagram)
我受到这里的答案的启发,并创建了一个全面的方法来处理所有必要的功能:
详细信息请查看博客文章
演示代码可从我的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();
}
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();
}
}