Ionic實現自定義返回按鍵事件

在 Android 和 Window 平臺下，有時候我們需要監聽返回按鍵的事件來進行相應的操作，也就是自定義返回按鍵事件。下麵根據一個例子來講解如何在 ionic 中自定義返回按鍵事件。

功能需求

首先看下要通過自定義返回按鍵事件來實現的需求（均在點擊返回鍵操作之後）：

• 如果鍵盤打開，則隱藏鍵盤；
• 如果顯示 ionic 的 Loading 組件（在請求數據的時候），則隱藏 Loading 組件；
• 如果當前頁面是子頁面，則返回上個頁面；如果是根頁面，則提示用戶是否退出應用。

具體實現

首先說明下，本示例的 ionic 應用的結構是 tabs 結構。

1. 給 tabs.html 中的 ion-tabs 定義別名，如 mainTabs：

<ion-tabs #mainTabs selectedIndex="1">
    <ion-tab [root]="tab1Root" tabTitle="頁面1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="頁面2"></ion-tab>
</ion-tabs>

給 ion-tabs 定義別名的目的是方便通過代碼找到 ion-tabs 的實例。

1. 在 app.component.ts 中進行實現代碼編寫（實現細節在註釋中）：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Keyboard, IonicApp, NavController, Tabs, ToastController, Toast } from 'ionic-angular';

@Component({
    templateUrl: 'app.html'
})
export class AppComponent {
    @ViewChild(Nav) nav: Nav; // ion-nav 引用
    backButtonPressed: boolean = false;  // 用於判斷返回鍵是否觸發

    constructor(public platform: Platform,
                public ionicApp: IonicApp,
                public toastCtrl: ToastController,
                public keyboard: Keyboard) {

        // 等待平臺載入完成之後註冊返回按鍵事件
        this.platform.ready().then(() => {
            this.registerBackButtonAction(); // 註冊返回按鍵事件
        });
    }

    /**
     * 註冊返回按鍵事件
     */
    registerBackButtonAction() {

        // 使用 registerBackButtonAction 方法進行自定義事件處理程式
        this.platform.registerBackButtonAction(() => {

            // 如果鍵盤開啟則隱藏鍵盤。實現要點：使用 ionic-plugin-keyboard 插件進行鍵盤的控制
            if (this.keyboard.isOpen()) {
                this.keyboard.close();
                return;
            }

            // 隱藏載入動畫。實現要點：通過 this.ionicApp._loadingPortal 獲取到代表 Loading 的 OverlayPortal，然後獲取當前被激活的 ViewController
            const activePortal: any = this.ionicApp._loadingPortal.getActive();
            if (activePortal) { // 如果有被激活的 ViewController 則將其隱藏。
                activePortal.dismiss();
                activePortal.onDidDismiss();
                return;
            }

            // 根據當前導航進行不同的處理（ mainTabs 對象是在 TabsPage 定義的 ion-tabs ）
            // 通過 this.nav.getActive().instance.mainTabs 獲取到別名為 mainTabs 的 ion-tabs
            const mainTabs: Tabs = this.nav.getActive().instance.mainTabs;
            if (mainTabs) {

                // 獲取到當前被選中的 ion-tab
                const mainNav: NavController = mainTabs.getSelected();

                // 如果 ion-tab 能返回則返回上一個頁面，不能就直接退出應用
                mainNav.canGoBack() ? mainNav.pop() : this.showExit();
            } else {

                // 如果 ion-nav 能返回則返回上一個頁面，不能就直接退出應用
                this.nav.canGoBack() ? this.nav.pop() : this.showExit();
            }
            return;
        }, 1);
    }

    /**
     * 雙擊退出提示框
     */
    showExit() {
        if (this.backButtonPressed) { // 當觸發標誌為 true 時，即2秒內雙擊返回按鍵則退出APP
            this.platform.exitApp();
        } else {
            const currentToast: Toast = this.toastCtrl.create({
                message: '再按一次退出應用',
                duration: 2000,
                position: 'top'
            });
            currentToast.present().then(() => {
                this.backButtonPressed = true;

                // 2秒內沒有再次點擊返回則將觸發標誌標記為false
                const id: any = setTimeout(() => {
                    clearTimeout(id);
                    this.backButtonPressed = false;
                }, 2000);
            });
        }
    }
}