ionic2+帶tab項目捕捉android返回鍵

本示例是ionic3.3,用了懶加載

  • app.html中,添加#myNav,在app.component.ts文件通過@ViewChild('myNav')獲取:
    <ion-nav #myNav [root]="rootPage"></ion-nav>

  • 在app.component.ts中:獲取myNav,注冊返回事件監聽

export class MyApp {
    rootPage: any;
    backButtonPressed: boolean = false; 

    @ViewChild('myNav') nav: Nav;

    constructor(public platform: Platform,
        statusBar: StatusBar,
        splashScreen: SplashScreen,
        public ionicApp: IonicApp,
        public toastCtrl: ToastController,
        public util: UtilService,
        public keyboard: Keyboard,
        public sqlHelp: SqlService) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
            this.init();
            this.sqlHelp.createTable();
            this.registerBackButtonAction();
        });
    }
}
  • tabs.html中,添加#mainTabs,在tabs.ts文件通過@ViewChild('mainTabs') tabs:Tabs獲取:
<ion-tabs  #mainTabs>
  <ion-tab [root]="tab1Root" tabUrlPath="work" tabTitle="業務" tabIcon="apps"></ion-tab> 
  <ion-tab [root]="tab2Root" tabUrlPath="report" tabTitle="報表" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="alarm" tabTitle="提醒" [tabBadge]="tabBadgeNum"
           tabIcon="alarm"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="setting" tabTitle="設置" tabIcon="settings"></ion-tab>
</ion-tabs>
  • tabs.ts中:
import {Component, ViewChild} from '@angular/core';
import {IonicPage,Tabs} from "ionic-angular";
import {UtilService} from '../../providers/util-service';
@IonicPage()
@Component({
    templateUrl: 'tabs.html'
})
export class TabsPage {
    tabBadgeNum:string;
    // this tells the tabs component which Pages
    // should be each tab's root Page
    @ViewChild('mainTabs') tabs: Tabs;
    tab1Root: any = 'WorkPage';
    tab2Root: any = 'ReportPage';
    tab3Root: any = 'AlarmPage';
    tab4Root: any = 'SettingPage';

    constructor( private utilService: UtilService) {
    }
}
  • app.component.ts寫事件:
    registerBackButtonAction() {
        this.platform.registerBackButtonAction(() => {
            if (this.keyboard.isOpen()) {
                //按下返回鍵時,先關閉鍵盤
                this.keyboard.close();
                return;
            };
            //如果想點擊返回按鈕隱藏toast或loading或Overlay就把下面加上
            // this.ionicApp._toastPortal.gaetActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive()
            //不寫this.ionicApp._toastPortal.getActive()是因為連按2次退出
            let activePortal = this.ionicApp._modalPortal.getActive() ||this.ionicApp._overlayPortal.getActive();
            let loadingPortal = this.ionicApp._loadingPortal.getActive();
            if (activePortal) {
                //其他的關閉
                activePortal.dismiss().catch(() => {
                });
                activePortal.onDidDismiss(() => {
                });
                return;
            }
            if (loadingPortal) {
                //loading的話,返回鍵無效
                return;
            }
            let activeVC = this.nav.getActive();
            let page = activeVC.instance;

            if (page instanceof LoginPage || page instanceof WelcomePage) {
                this.platform.exitApp();
                return;
            }
            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: 'bottom',
                cssClass: 'text-align: center'
            }).present();
            this.backButtonPressed = true;
            setTimeout(() => this.backButtonPressed = false, 2000);//2秒內沒有再次點擊返回則將觸發標志標記為false
        }
    }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容