我要评论问题
注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好，所以有几种方法：
1.实现按返回键最小化应用（最小化应用需要装cordova-plugin-appminimize插件，使用window['appminimize'].minimize();）。
2.要么请求用户确认（添加一个confirmation alerts）。
3.按一下提示，按两下退出（加一个方法用toast提醒）。
这里用第三种展示。
解决
在app.html中，添加#mynav，在app.component.ts文件通过@viewchild('mynav')获取：
<ion-nav #mynav [root]="rootpage"></ion-nav>
在app.component.ts中：
import {component, viewchild} from '@angular/core';
import {platform, toastcontroller, nav, ionicapp} from 'ionic-angular';
import {statusbar, splashscreen} from 'ionic-native';
import {tabspage} from '../pages/tabs/tabs';
@component({
templateurl: 'app.html'
})
export class myapp {
rootpage = tabspage;
backbuttonpressed: boolean = false; //用于判断返回键是否触发
@viewchild('mynav') nav: nav;
constructor(public ionicapp: ionicapp, public platform: platform, public toastctrl: toastcontroller) {
platform.ready().then(() => {
statusbar.styledefault();
splashscreen.hide();
this.registerbackbuttonaction();//注册返回按键事件
});
}
registerbackbuttonaction() {
this.platform.registerbackbuttonaction(() => {
//如果想点击返回按钮隐藏toast或loading或overlay就把下面加上
// this.ionicapp._toastportal.getactive() || this.ionicapp._loadingportal.getactive() || this.ionicapp._overlayportal.getactive()
let activeportal = this.ionicapp._modalportal.getactive();
if (activeportal) {
activeportal.dismiss().catch(() => {});
activeportal.ondiddismiss(() => {});
return;
}
let activevc = this.nav.getactive();
let tabs = activevc.instance.tabs;
let activenav = tabs.getselected();
return activenav.cangoback() ? activenav.pop() : this.showexit();//另外两种方法在这里将this.showexit()改为其他两种的方法的逻辑就好。
}, 1);
}
//双击退出提示框
showexit() {
if (this.backbuttonpressed) { //当触发标志为true时，即2秒内双击返回按键则退出app
this.platform.exitapp();
} else {
this.toastctrl.create({
message: '再按一次退出应用',
duration: 2000,
position: 'top'
}).present();
this.backbuttonpressed = true;
settimeout(() => this.backbuttonpressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
}
}
}
在tabs.html中，添加#maintabs，在tabs.ts文件通过@viewchild('maintabs') tabs:tabs;获取:
<ion-tabs #maintabs> <ion-tab [root]="tab1root" tabtitle="home" tabicon="home"></ion-tab> <ion-tab [root]="tab2root" tabtitle="about" tabicon="information-circle"></ion-tab> <ion-tab [root]="tab3root" tabtitle="contact" tabicon="contacts"></ion-tab> </ion-tabs>
在tabs.ts中：
import {component, viewchild} from '@angular/core';
import { homepage } from '../home/home';
import { aboutpage } from '../about/about';
import { contactpage } from '../contact/contact';
import {tabs} from "ionic-angular";
@component({
templateurl: 'tabs.html'
})
export class tabspage {
@viewchild('maintabs') tabs:tabs;//加这句以及引用两个模块
tab1root: any = homepage;
tab2root: any = aboutpage;
tab3root: any = contactpage;
constructor() {
}
}
完成。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论