ionic2如何处理android硬件返回按钮

概述问题注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好，所以有几种方法：

问题

注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出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() {  } }

完成。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的ionic2如何处理android硬件返回按钮全部内容，希望文章能够帮你解决ionic2如何处理android硬件返回按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。