ionic2 處理android硬件返回按鈕

問題

注冊安卓硬件返回按鈕事件是必須的,因為用戶不小心點擊了返回按鈕就退出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() {
   }
 }

完成。