前言

• 之前在這里介紹了ionic3如何處理android返回按鈕
• ionic4和ionic3關(guān)于android返回按鈕的處理是不一樣的，而且有點(diǎn)坑，所以本文介紹一下

效果演示

• 如下gif，所有返回操作，包括關(guān)閉alert等彈出框都是點(diǎn)擊android硬件返回按鈕的效果
  

處理邏輯

• 點(diǎn)擊返回按鈕判斷當(dāng)前頁(yè)面是否有彈出層打開，如果有則關(guān)閉，否則判斷當(dāng)前頁(yè)面是否是根頁(yè)面，如果不是根頁(yè)面就“調(diào)用”頁(yè)面返回方法，如果是根頁(yè)面就調(diào)用插件最小化app（我這里使用最小化，你可以做按兩次退出提示）
  1.是否彈出層：alert、action、popover、modal等屬于彈出層，需要手動(dòng)關(guān)閉
  2.是否是根頁(yè)面：一般是登錄頁(yè)或tabs的一級(jí)頁(yè)面
  3.調(diào)用頁(yè)面返回方法：ionic3是我們手動(dòng)調(diào)用NavController.pop()；ionic4我們判斷當(dāng)前不是根頁(yè)面，不用做處理，ionic4是會(huì)自動(dòng)調(diào)用返回
  4.調(diào)用插件最小化app：使用App Minimize插件

核心代碼

• tabs.page.html添加#tabs
  
• 完整的tabs.page.ts代碼

import { Component, OnInit, ViewChild } from '@angular/core';
import {
    ActionSheetController,
    AlertController,
    Events,
    IonTabs,
    MenuController,
    ModalController, Platform,
    PopoverController
} from '@ionic/angular';
import { Helper } from '../../providers/Helper';
import { NativeService } from '../../providers/NativeService';

@Component({
    selector: 'app-tabs',
    templateUrl: 'tabs.page.html',
    styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {
    @ViewChild('tabs') tabs: IonTabs;
    tabsCanGoBack = false;
    tabsParentCanGoBack = false;

    constructor(public platform: Platform,
                public events: Events,
                public helper: Helper,
                public native: NativeService,
                public alertCtrl: AlertController,
                public modalCtrl: ModalController,
                public menuCtrl: MenuController,
                public actionSheetCtrl: ActionSheetController,
                public popoverCtrl: PopoverController) {
    }

    ngOnInit() {
        this.platform.backButton.subscribe(() => {
            this.tabsCanGoBack = this.tabs.outlet.canGoBack();
            this.tabsParentCanGoBack = this.tabs.outlet.parentOutlet.canGoBack();
            this.androidBackButtonHandle();
        });
    }

    async androidBackButtonHandle() {
        try {
            const alert = await this.alertCtrl.getTop();
            if (alert) {
                alert.dismiss();
                return;
            }
            const action = await this.actionSheetCtrl.getTop();
            if (action) {
                action.dismiss();
                return;
            }
            const popover = await this.popoverCtrl.getTop();
            if (popover) {
                popover.dismiss();
                return;
            }
            const modal = await this.modalCtrl.getTop();
            if (modal) {
                modal.dismiss();
                return;
            }
            const isOpen = await this.menuCtrl.isOpen();
            if (isOpen) {
                this.menuCtrl.close();
                return;
            }
            if (!this.tabsCanGoBack && !this.tabsParentCanGoBack) {
                this.native.appMinimize();
                return;
            }
        } catch (error) {
        }
    }
}

需要注意的問(wèn)題

• 在tabs.page.ts中使用this.platform.backButton.subscribe訂閱android返回按鈕事件，注意避免使用redirectTo路由重定向到TabsPage，否則會(huì)重復(fù)訂閱，因?yàn)?code>platform是全局的
• 默認(rèn)情況下若不在根頁(yè)面，ionic4會(huì)自動(dòng)調(diào)用返回，但不會(huì)自動(dòng)關(guān)閉彈出層，并且彈出層是異步操作。所以如下代碼先獲取當(dāng)前路由和父路由看是否為根頁(yè)面，然后在處理彈出層

            // 先判斷是否能返回，不能返回則認(rèn)為是根頁(yè)面
            this.tabsCanGoBack = this.tabs.outlet.canGoBack();
            this.tabsParentCanGoBack = this.tabs.outlet.parentOutlet.canGoBack();
           // 處理彈出層
            this.androidBackButtonHandle(); 

            // 如果有彈出層打開，則關(guān)閉并return
            const alert = await this.alertCtrl.getTop();
            if (alert) {
                alert.dismiss();
                return;
            }
           ......

            // 如果沒(méi)有彈出層打開則最小化app
            if (!this.tabsCanGoBack && !this.tabsParentCanGoBack) {
                this.native.appMinimize();
                return;
            }

• 你以為就這樣就結(jié)束了？圖樣圖森破
  當(dāng)app啟動(dòng)，第一個(gè)頁(yè)面是登錄頁(yè)，這時(shí)還沒(méi)有加載tabs.page.ts，也就沒(méi)有訂閱android返回按鈕事件，那這時(shí)候點(diǎn)擊返回按鈕沒(méi)有任何反應(yīng)。所以如下圖在app.component.ts應(yīng)用入口處理一下
  
• 也許你會(huì)問(wèn)為何不統(tǒng)一在app.component.ts中處理路由？因?yàn)樵赼pp.component.ts中獲取不到tabs路由
  那你可能會(huì)想當(dāng)tabs.page.ts加載后，把tabs路由賦值給全局變量，然后在app.component.ts中統(tǒng)一處理，那確實(shí)應(yīng)該沒(méi)問(wèn)題，本文只是說(shuō)明各種情況，后面我的代碼也可能優(yōu)化

最后

• 我的完整代碼在github ionic4_tabs，請(qǐng)clone下來(lái)方便查看，每次看之前，先更新一波，因?yàn)殡S時(shí)更新