Ionic2 下处理 Android 设备下返回按钮的事件
本文分享了 Ionic2 下处理 Android 设备下返回按钮的事件,供参考。
原文发表于我的技术博客
代码中我分享了如何捕捉 Ionic2 项目在 Android 设备下返回按钮事件,并在捕捉到的事件中可以灵活根据需求编写相关业务逻辑,如退出、返回等。
详细的逻辑处理参见下面代码即可。
{% codeblock lang:js%}
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {App, NavController} from 'ionic-angular';
import {ViewChild} from '@angular/core';
@Component({
template: '<ion-nav #rootNavController [root]="rootPage" #content swipe-back-enabled="false">'
})
export class MyApp {
@ViewChild('rootNavController') nav: NavController;
private rootPage: any;
constructor(private platform: Platform) {
this.rootPage = TabsPage;
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(); //退出按钮重写******开始****** document.addEventListener('backbutton', () => { let activeVC = this.nav.getActive(); let page = activeVC.instance; if (!(page instanceof TabsPage)) { if (!this.nav.canGoBack()) { console.log('检测到在根视图点击了返回按钮。'); return platform.exitApp(); } console.log('检测到在子路径中点击了返回按钮。'); return this.nav.pop(); } let tabs = page.tabs; let activeNav = tabs.getSelected(); if (!activeNav.canGoBack()) { console.log('检测到在 tab 页面的顶层点击了返回按钮。'); return platform.exitApp(); } console.log('检测到当前 tab 弹出层的情况下点击了返回按钮。'); return activeNav.pop(); }, false); //退出按钮重写******结束****** });
}
}
ionicBootstrap(MyApp);
{% endcodeblock %}
作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Ionic 1 & 2 开发常见问题 Q&A
原文发表于我的技术博客 本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。原文发表于我的技术博客 1. 版本的问题 Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 以及 22 版本后引入了 TypeScript 语言,所以整体的语法结构不会有太大的变化,建议直接安装最新的版本学习,如果需要安装和课程一样的 22 版本,请参见我的博客:在 Ionic 2 项目中强制使用 22 版本,如果学习的是最新的版本,请参见最新的文档查询最新的语法定义:Ionic 2.0 相关资料,特别是 ionic serve 出错的时候,请参见最新的环境安装文档。 2. 安装失败的问题 因为需要加载国外的资源,所以最推荐的安装方式就是FQ安装,FQ后可以避免掉很多的安装坑。 如何要通过 CNPM 进行安装,请参见博文:使用 CNPM 进行 Ionic 环境的安装与配置,不过 CNPM 安装会遇到国内源不同步时计算包的 HASH 值不一样而安装出错的情况。 3. 在...
- 下一篇
没有 iOS 开发者账号的情况下部署到真机的方法
原文发表于我的技术博客 本文分享了官方推荐的没有 iOS 开发者账号的情况下部署到真机的方法,供参考。原文发表于我的技术博客 1. 官方推荐的方法 原文在此,也就是 Ionic 官方团队在博客中分享的方法,我简单翻译些重要的信息,详细细节可以参考原文。 2. XCode 部署 打开 Xode 设置 preferences (Xcode > Preferences…) 点击 ‘Accounts’ 添加你的 Apple ID (+ > Add Apple ID…) 当你登录成功后,会显示一个 ‘Personal Team’ 和角色 ‘Free’。 新建一个项目,并执行 Ionic 的编译命令: ionic start testApp blank --v2 cd testApp ionic build iOS 当你连接上真机设备,选择运行的时候,会出现下面的错误: 点击 ‘Fix Issue‘ 后出现: 点击选择后会继续出现如下错误: 回到真机上点击 ‘设置’ > ‘通用‘ > ‘设备管理’,你将看到你的 Apple ID 的邮箱地址,点击即可。 这样,再回到 XCo...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Docker安装Oracle12C,快速搭建Oracle学习环境