ionic2开发（五）返回按钮处理

Ionic2开发app注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好. 所以当用户点击返回按钮,应该提示"再按一次退出"。

借鉴了一下网上大神们的代码，结合自己的实际情况做了点修改，下面贴代码：

1、app.html：

添加#myNav,在app.component.ts文件通过@ViewChild('myNav')获取

<ion-nav #myNav [root]="rootPage"></ion-nav>

2、app.component.ts：

import { Component, ViewChild } from '@angular/core';import { Platform, ToastController, Nav, IonicApp, Keyboard} from 'ionic-angular';import { StatusBar, Splashscreen } from 'ionic-native';import { TabsPage } from '../pages/tabs/tabs';@Component({    templateUrl: 'app.html'})export class MyApp {    public rootPage;    backButtonPressed: boolean = false;  //用于判断返回键是否触发    @ViewChild('myNav') nav: Nav;    constructor(public platform: Platform,public toastCtrl: ToastController, public keyBoard: Keyboard ,public ionicApp: IonicApp) {        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.            StatusBar.styleDefault();            Splashscreen.hide();            this.registerBackButtonAction();//注册返回按键事件            /*===========设置rootPage（此部分代码根据情况自己添加）===============*/   }    //返回按键处理registerBackButtonAction() {        this.platform.registerBackButtonAction(() => {if (this.keyBoard.isOpen()) {                this.keyBoard.close();            }            else {            let activeVC = this.nav.getActive();            let page = activeVC.instance;            //此处if是rootPage为登录页的情况，else是rootPage为TabsPage（如果不需要判断登录页的情况直接用else内的代码即可）            if (!(page instanceof TabsPage)) {                if (!this.nav.canGoBack()) {                    console.log("检测到在根视图点击了返回按钮");                    this.showExit();                }                else {                    console.log("检测到在子路径中点击了返回按钮。");                    this.nav.pop();                }            }            else {                let tabs = page.tabs;                let activeNav = tabs.getSelected();                if (!activeNav.canGoBack()) {                    console.log('检测到在 tab 页面的顶层点击了返回按钮。');                    this.showExit();                }                else {                    console.log('检测到当前 tab 弹出层的情况下点击了返回按钮。');                    activeNav.pop();                }}            }        }, 1);    }    //双击退出提示框    showExit() {        if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP            this.platform.exitApp();        } else {            this.toastCtrl.create({                message: "再按一次退出应用",                duration: 2000,                position: 'bottom'                //cssClass: 'toastcss' //修改样式（根据需要添加）            }).present();            this.backButtonPressed = true;            setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false        } }}

3、tabs.html：

添加#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs:Tabs;获取

<ion-tabs  #mainTabs>    <ion-tab [root]="tab1Root" tabTitle="页面1" tabIcon="ios-pulse"></ion-tab>    <ion-tab [root]="tab2Root" tabTitle="页面2" tabIcon="ios-information-circle"></ion-tab>    <ion-tab [root]="tab3Root" tabTitle="页面3" tabIcon="ios-analytics"></ion-tab>    <ion-tab [root]="tab4Root" tabTitle="页面4" tabIcon="ios-construct"></ion-tab></ion-tabs>

4、tabs.ts:

import { Component,ViewChild} from '@angular/core';import { Tabs } from "ionic-angular";//（这里自己根据情况写）import { Page1 } from '..;import { Page2 } from '..';import { Page3 } from '..';import { Page4 } from '..';@Component({    templateUrl: 'tabs.html'})export class TabsPage {    @ViewChild('mainTabs') tabs: Tabs;    // this tells the tabs component which Pages    // should be each tab's root Page    tab1Root: any = Page1;    tab2Root: any = Page2;    tab3Root: any = Page3;    tab4Root: any = Page4;    constructor() {    }}

如果大家有更好的方法欢迎与我多多交流，本人学习中