Ionic2双击退出应用

在Ionic2项目结构解析中，我们知道在 src/app/app.component.ts 初始化项目，因此我们可以在这里监听Android返回按键，实现双击退出应用。

Ionic2 Platform中提供了监听返回按键的API registerBackButtonAction(callback, priority)，

参数类型描述callbackFunction返回键触发时执行的方法prioritynumber优先级，优先级高的会先执行，默认为0

注册返回按键事件

修改src/app/app.component.ts如下：

import { Component, ViewChild } from '@angular/core'; import { Platform, ToastController, Nav } 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(Nav) nav: Nav; constructor(public platform: Platform, public toastCtrl: ToastController) { this.initializeApp(); } initializeApp() { this.platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); //注册返回按键事件 this.platform.registerBackButtonAction((): any => { let activeVC = this.nav.getActive(); let page = activeVC.instance; if (!(page instanceof TabsPage)) { if (!this.nav.canGoBack()) { //当前页面为tabs，退出APP return this.showExit(); } //当前页面为tabs的子页面，正常返回 return this.nav.pop(); } let tabs = page.tabs; let activeNav = tabs.getSelected(); if (!activeNav.canGoBack()) { //当前页面为tab栏，退出APP return this.showExit(); } //当前页面为tab栏的子页面，正常返回 return activeNav.pop(); }, 101); }); } //双击退出提示框，这里使用Ionic2的ToastController showExit() { if (this.backButtonPressed) this.platform.exitApp(); //当触发标志为true时，即2秒内双击返回按键则退出APP else { let toast = this.toastCtrl.create({ message: '再按一次退出应用', duration: 2000, position: 'bottom' }); toast.present(); this.backButtonPressed = true; //2秒内没有再次点击返回则将触发标志标记为false setTimeout(() => { this.backButtonPressed = false; }, 2000) } } }

修改 src/pages/tabs/tabs.html

<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>

修改 src/pages/tabs/tabs.ts

import { Component,ViewChild } from '@angular/core'; import { Tabs } from 'ionic-angular'; import { HomePage } from '../home/home'; import { AboutPage } from '../about/about'; import { ContactPage } from '../contact/contact'; @Component({ templateUrl: 'tabs.html' }) export class TabsPage { @ViewChild('mainTabs') tabs:Tabs; //根据html中的'#mainTabs'获取Tabs实例 tab1Root: any = HomePage; tab2Root: any = AboutPage; tab3Root: any = ContactPage; constructor() { } }

转自https://dpary.github.io/2016/12/19/

方案2(若前面方法不可用使用该方法)

import {App} from ‘ionic-angular’

this.platform.registerBackButtonAction(() => { const overlay = this.app._appRoot._overlayPortal.getActive(); const nav = this.app.getActiveNav(); if (overlay && overlay.dismiss) { overlay.dismiss(); } else if (nav.canGoBack()) { nav.pop(); } else { this.platform.exitApp(); } }, 101)