ionic3学习之Android返回键的处理

provider 简介

了解 ionic3 的 provider
provider 是 ionic 自己定义的一个概念，类似于我们在 angular上面的 service。两者有部分的相同点以及不同点。
对比：

不同点

技术	使用的命令	文件名	路径	类的名字
ionic	ionic g provider config	config.ts	位于providers/config下	ConfigProvider
angular	ng g service config	config.service.ts	文件所建文件夹的目录下	ConfigService

相同点
按照 angular 的 service 来理解，因为 ionic 是基于 angular 来开发的。基于 angular 的概念理解就最直观。都可以使用 @Injectable()来标识，可以用来依赖注入。
详细的可以看下 angular 的 service 文章
angular的依赖注入
Angular4学习笔记之依赖注入

创建返回按键的处理服务

我的服务是改过了几次路径，最终的路径在 src/providers/utils/ 下
back-button-service.ts

import { Injectable } from '@angular/core';import { Platform, ToastController, App, NavController, Tabs } from 'ionic-angular';@Injectable()export class BackButtonServiceProvider {  //控制硬件返回按钮是否触发，默认false  backButtonPressed: boolean = false;  //构造函数 依赖注入  constructor(public platform: Platform,              public appCtrl: App,              public toastCtrl: ToastController) { }  //注册方法  registerBackButtonAction(tabRef: Tabs): void {    //registerBackButtonAction是系统自带的方法    this.platform.registerBackButtonAction(() => {      //获取NavController      let activeNav: NavController = this.appCtrl.getActiveNav();      // 有博主说上面的方法在新的版本中被移除，但是我在测试的时候还可以继续使用，下面这段代码是新的使用方式，我也贴出来。         // let activeNav: NavController = this.appCtrl.getActiveNavs()[0];      //如果可以返回上一页，则执行pop      if (activeNav.canGoBack()) {        activeNav.pop();      } else {        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {          //执行退出          this.showExit();        } else {          //选择首页第一个的标签          tabRef.select(0);        }      }    });  }  //退出应用方法  private showExit(): void {    //如果为true，退出    if (this.backButtonPressed) {      this.platform.exitApp();    } else {      //第一次按，弹出Toast      this.toastCtrl.create({        message: '再按一次退出应用',        duration: 2000,        position: 'top'      }).present();      //标记为true      this.backButtonPressed = true;      //两秒后标记为false，如果退出的话，就不会执行了      setTimeout(() => this.backButtonPressed = false, 2000);    }  }}

注入返回处理逻辑的服务

第一步：修改 tab.html

// 增加 #myTabs 属性<ion-tabs #myTabs></ion-tabs>

第二步，修改 tab.ts

// 引入需要使用到的模块import {Component, ViewChild} from '@angular/core';import {NavParams, Platform, Tabs} from 'ionic-angular';import {BackButtonServiceProvider} from "../../providers/utils/back-button-service";

// 在 class 中增加代码@ViewChild('myTabs') tabRef: Tabs;constructor(public navParams: NavParams,              public platform: Platform,              public backButtonService: BackButtonServiceProvider) {    platform.ready().then(() => {      this.backButtonService.registerBackButtonAction(this.tabRef);    });  }

到此我们就修改完成了。需要在模拟器上面或者 android手机上面调试查看。

ionic3学习之Android返回键的处理

ionic3学习之Android返回键的处理

provider 简介

创建返回按键的处理服务

注入返回处理逻辑的服务

第一步：修改 tab.html

第二步，修改 tab.ts

更多相关文章

随机推荐