ionic2开发返回按钮处理

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

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

1、app.html：

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

[javascript]  view plain  copy

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

2、app.component.ts：

[javascript]  view plain  copy

1. import { Component, ViewChild } from '@angular/core';  
2. import { Platform, ToastController, Nav, IonicApp, Keyboard} from 'ionic-angular';  
3. import { StatusBar, Splashscreen } from 'ionic-native';  
4. import { TabsPage } from '../pages/tabs/tabs';  
5. @Component({  
6.     templateUrl: 'app.html'  
7. })  
8. export class MyApp {  
9.     public rootPage;  
10.     backButtonPressed: boolean = false;  //用于判断返回键是否触发  
11.     @ViewChild('myNav') nav: Nav;  
12.   
13.     constructor(public platform: Platform,public toastCtrl: ToastController, public keyBoard: Keyboard ,public ionicApp: IonicApp) {  
14.   
15.         platform.ready().then(() => {  
16.             // Okay, so the platform is ready and our plugins are available.  
17.             // Here you can do any higher level native things you might need.  
18.             StatusBar.styleDefault();  
19.             Splashscreen.hide();  
20.             this.registerBackButtonAction();//注册返回按键事件  
21.   
22.             /*===========设置rootPage（此部分代码根据情况自己添加）===============*/  
23.      
24. }  
25.   
26.     //返回按键处理  
27. registerBackButtonAction() {  
28.         this.platform.registerBackButtonAction(() => {  
29. if (this.keyBoard.isOpen()) {  
30.                 this.keyBoard.close();  
31.             }  
32.             else {  
33.             let activeVC = this.nav.getActive();  
34.             let page = activeVC.instance;  
35.             //此处if是rootPage为登录页的情况，else是rootPage为TabsPage（如果不需要判断登录页的情况直接用else内的代码即可）  
36.             if (!(page instanceof TabsPage)) {  
37.                 if (!this.nav.canGoBack()) {  
38.                     console.log("检测到在根视图点击了返回按钮");  
39.                     this.showExit();  
40.                 }  
41.                 else {  
42.                     console.log("检测到在子路径中点击了返回按钮。");  
43.                     this.nav.pop();  
44.                 }  
45.             }  
46.             else {  
47.                 let tabs = page.tabs;  
48.                 let activeNav = tabs.getSelected();  
49.                 if (!activeNav.canGoBack()) {  
50.                     console.log('检测到在 tab 页面的顶层点击了返回按钮。');  
51.                     this.showExit();  
52.                 }  
53.                 else {  
54.                     console.log('检测到当前 tab 弹出层的情况下点击了返回按钮。');  
55.                     activeNav.pop();  
56.                 }  
57. }  
58.             }  
59.         }, 1);  
60.     }  
61.   
62.     //双击退出提示框  
63.     showExit() {  
64.         if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP  
65.             this.platform.exitApp();  
66.         } else {  
67.             this.toastCtrl.create({  
68.                 message: "再按一次退出应用",  
69.                 duration: 2000,  
70.                 position: 'bottom'  
71.                 //cssClass: 'toastcss' //修改样式（根据需要添加）  
72.             }).present();  
73.             this.backButtonPressed = true;  
74.             setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false  
75.         }  
76.  }  
77. }  

3、tabs.html：

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

[javascript]  view plain  copy

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

4、tabs.ts:

[javascript]  view plain  copy

1. import { Component,ViewChild} from '@angular/core';  
2. import { Tabs } from "ionic-angular";  
3.   
4. //（这里自己根据情况写）  
5. import { Page1 } from '..;  
6. import { Page2 } from '..';  
7. import { Page3 } from '..';  
8. import { Page4 } from '..';  
9.   
10. @Component({  
11.     templateUrl: 'tabs.html'  
12. })  
13. export class TabsPage {  
14.     @ViewChild('mainTabs') tabs: Tabs;  
15.     // this tells the tabs component which Pages  
16.     // should be each tab's root Page  
17.     tab1Root: any = Page1;  
18.     tab2Root: any = Page2;  
19.     tab3Root: any = Page3;  
20.     tab4Root: any = Page4;  
21.   
22.     constructor() {  
23.     }  
24. }
25. 
    
26. 
    
27. 转载自：http://blog.csdn.net/genglanggenglang/article/details/77679245
28.