脚本宝典收集整理的这篇文章主要介绍了

ionic3学习之Android返回键的处理

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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返回键的处理

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过