派对迟到了。。。但除了关闭推送的页面之外，还有更多的后退按钮，特别是对于有几个选项卡页面的项目。
我面临一个问题，如何处理默认移动设备的后退按钮，该按钮在退出应用程序时检查确认，如果我按下后退按钮，应该调用一些显示弹出窗口的处理程序，以确认退出。或者有任何方法调用registerBackButtonAction()？还是在IONIC2中如何使用它，？请帮帮我。提前感谢。
在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();
}
平台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>
TypeScript：
import {Platform} from 'ionic-angular';
@Page({ /*...*/ })
export MyPage {
constructor(platform: Platform) {
this.platform = platform;
}
exitApp(){
this.platform.exitApp();
}
}
有时，页面不是被推到根页面，而是被推到选项卡页面的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();
}