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() {
- }
- }
-
-
- 转载自:http://blog.csdn.net/genglanggenglang/article/details/77679245