ionic3 教程（四）安卓硬件返回鍵處理

連接：
ionic3教程（一）安裝和配置
ionic3教程（二）登陸頁製做
ionic3教程（三）設置頁製做
ionic3教程（四）安卓硬件返回鍵處理
ionic3 教程（五）基本的網絡請求

前幾天測出了一個問題，就是在根目錄點擊安卓的硬件返回鍵，會直接致使程序退出。在網上找到了 小軍617 寫的這篇ionic2實戰-完美處理安卓硬件返回按鈕。

這篇文章解決了一部分問題，可讓咱們在 Tabs 下點擊返回按鈕彈出一個 toast 提示「再按一次退出應用」，而後若是用戶在2秒內再按一次就會真的退出。不過Demo 在登陸頁點擊返回按鈕沒有任何反應，並且點擊退出登陸後，點擊硬件返回按鈕會回到主界面。

因此我打算對這個方法進行一下優化，包括如下幾點。

• 將方法從 app.component.ts 中抽出作成一個公共方法，便於其餘頁面使用
• 修復退出登陸後，點擊硬件返回按鈕會回到主界面
• 在 tabs 頁，若是不在首頁標籤，點擊硬件返回按鈕，先跳轉到首頁。以後再按兩次退出

1.在 src 目錄下，新建文件夾 services 和文件 backButton.service.ts

輸入如下代碼，我已經寫了很全的註釋，仔細看

import { Injectable } from '@angular/core';
import { Platform, ToastController, App, NavController, Tabs } from 'ionic-angular';

@Injectable()
export class BackButtonService {

  //控制硬件返回按鈕是否觸發，默認false
  backButtonPressed: boolean = false;

  //構造函數 依賴注入
  constructor(public platform: Platform,
              public appCtrl: App,
              public toastCtrl: ToastController) { }

  //註冊方法
  registerBackButtonAction(tabRef: Tabs): void {
    
    //registerBackButtonAction是系統自帶的方法
    this.platform.registerBackButtonAction(() => {
      //獲取NavController
      let activeNav: NavController = this.appCtrl.getActiveNavs()[0];
      //若是能夠返回上一頁，則執行pop
      if (activeNav.canGoBack()) {
        activeNav.pop();
      } else {
        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {
          //執行退出
          this.showExit();
        } else {
          //選擇首頁第一個的標籤
          tabRef.select(0);
        }
      }
    });
  }

  //退出應用方法
  private showExit(): void {
    //若是爲true，退出
    if (this.backButtonPressed) {
      this.platform.exitApp();
    } else {
        //第一次按，彈出Toast
        this.toastCtrl.create({
            message: '再按一次退出應用',
            duration: 2000,
            position: 'top'
        }).present();
      //標記爲true
      this.backButtonPressed = true;
      //兩秒後標記爲false，若是退出的話，就不會執行了
      setTimeout(() => this.backButtonPressed = false, 2000);
    }
  }
}

注意：
以前我寫的是

let activeNav: NavController = this.appCtrl.getActiveNav();

可是在新版中，getActiveNav() 這個方法被移除了，因此須要改成如下方法

let activeNav: NavController = this.appCtrl.getActiveNavs()[0];

2.修改 app.module.ts

導入 BackButtonService，並添加到 providers 裏

3.修改 Tabs

Tabs.html

把<ion-tabs>修改成<ion-tabs #myTabs>

Tabs.ts

這是修改了的部分，能夠看看都改動了哪些

引入ViewChild、Platform、Tabs、BackButtonService    
@ViewChild('myTabs') tabRef: Tabs;

this.platform.ready().then(() => {
  this.backButtonService.registerBackButtonAction(this.tabRef);
});

完整版

import { Component, ViewChild } from '@angular/core';
import { Platform, Tabs } from 'ionic-angular';

import { HomePage } from '../home/home';
import { SettingPage } from "../setting/setting";
import { BackButtonService } from "../../services/backButton.service";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tabRoots: Object[];
  @ViewChild('myTabs') tabRef: Tabs;

  constructor(public backButtonService: BackButtonService,
    private platform: Platform) {
    this.tabRoots = [
      {
        root: HomePage,
        tabTitle: 'Home',
        tabIcon: 'home'
      },
      {
        root: SettingPage,
        tabTitle: '設置',
        tabIcon: 'person'
      }
    ];

    this.platform.ready().then(() => {
      this.backButtonService.registerBackButtonAction(this.tabRef);
    });
  }
}

platform.ready().then 主要是爲了保證能註冊上，由於若是不是 ready 狀態有可能會失敗

4.Login

Login.ts

這是修改了的部分，能夠看看都改動了哪些

引入Platform、BackButtonService    

this.platform.ready().then(() => {
  this.backButtonService.registerBackButtonAction(null);
});

完整版

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { TabsPage } from "../tabs/tabs";
import { Platform } from 'ionic-angular';
import { BackButtonService } from "../../services/backButton.service";

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public modalCtrl: ModalController,
              private backButtonService: BackButtonService,
              private platform: Platform) {
      this.platform.ready().then(() => {
          this.backButtonService.registerBackButtonAction(null);
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  logIn(username: HTMLInputElement, password: HTMLInputElement) {
    if (username.value.length == 0) {
      alert("請輸入帳號");
    } else if (password.value.length == 0) {
      alert("請輸入密碼");
    } else {
      let userinfo: string = '用戶名：' + username.value + '密碼：' + password.value;
      alert(userinfo);
      let modal = this.modalCtrl.create(TabsPage);
      modal.present();
    }
  }

}

這裏的 registerBackButtonAction 傳了一個 null 進去，回去看看 backButton.service.ts 的判斷，咱們就能夠知道，這裏是爲了讓他能執行雙擊退出操做

5.使用安卓手機測試

//執行這兩句
$ ionic cordova platform add android
$ ionic cordova build android

接下來就能夠運行了，我這邊是直接打開 Android Studio 裝到手機運行的，親測有效。試一試吧

Demo 下載地址