Ionic2双击退出应用

2019-11-09 18:22:53

字体：大中小

来源：转载

供稿：网友

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

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

参数	类型	描述
callback	Function	返回键触发时执行的方法
priority	number	优先级，优先级高的会先执行，默认为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/

上一篇：博客第一天！

下一篇：欢迎使用CSDN-markdown编辑器