ionic2APP 如何处理返回键问题
1、APP中难免会有自定义各种modal、alert,modal或alert处于激活状态时android用户按物理返回键,页面被返回,而这些弹窗切没有被返回,一种解决办法是可以在每个组件内用生命周期钩子ionViewWillLeave监听有modal或是alert的页面,如果处于激活状态则先关闭它,当然这种状态简单却不高效;
2、封装一个服务,代码如下
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {TranslateService} from 'ng2-translate';
@Injectable()
export class ToastService {
comfirmSubject = new Subject();
// comfirmObservable$ = this.comfirmSubject.asObservable();
_isActive = false;
gobackWhenClose = false;
model = null;
is_access_modal:boolean = false;
set isActive(active: boolean) {
if(active) {
this._isActive = true;
} else {
this._isActive = false;
if(this.model) {
this.model.dismiss();
this.model = null;
}
}
}
get isActive() {
return this._isActive || this.model;
}
constructor(private translate: TranslateService) {}
// 普通弹框
confirm(params: any) {
this.comfirmSubject.next(params);
this.isActive = true;
}
// 业务成功后弹框,title带成功的icon
successConfirm(params: any) {
params = Object.assign(params, {
title: `<i class="icon-icons icon-icons-success"></i><span>${params['title'] || this.translate.get('TIPS.WENXINTISHI')['value']}</span>`
});
this.comfirmSubject.next(params);
this.isActive = true;
}
// 业务失败后弹框
errorConfirm(params: any) {
params = Object.assign(params, {
title: `<i class="icon-icons icon-icons-error"></i><span>${params['title'] || this.translate.get('TIPS.WENXINTISHI')['value']}</span>`
});
// 错误提示处理
let feedbacks = this.translate.get('FEEDBACK')['value'];
let content = params['body'];
if (content) {
if (content.indexOf('MSG.CLINETFUNDNOTENOUGH') > -1) { //购买基金余额不足时,后台返回数据做了拆分
params['body'] = feedbacks['MSG.CLIENTFUNDNOTENOUGH'] + '<span class="red">'+ content.split('|')[1] + '</span>'
} else {
params['body'] = feedbacks[content] || content;
}
}
this.comfirmSubject.next(params);
this.isActive = true;
}
}
然后在APP.component.ts中去监听Android物理返回键,
}
if ( this.toastService.isActive && !this.toastService.is_access_modal) { // 当前有自定义toast,关闭toast
this.toastService.isActive = false; //包括toast和model
if(this.toastService.gobackWhenClose) {
this.toastService.gobackWhenClose = false;
this.toastService._isActive = false;
this.events.publish('backto');
}
return;
} 其中有多余的代码(为了符合自己业务需求,主要是isActive这个变量及
this.toastService.isActive = false;
,请忽略多余没用的代码;
ionic2APP 如何处理返回键问题的更多相关文章
- react native 之 Android物理返回键
基本用法 根据文档,安卓back键的处理主要就是一个事件监听: BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed ...
- Android 两步搞定Fragment的返回键
Fragment可以说是在Android开发必需要使用到技术,项目中的界面基本上都是使用Fragment来实现,而Activity只是作为Fragment的载体,但有些特殊情况下Fragment也不得 ...
- android 实现返回键执行home键方法
在公司的产品开发,中老板很是执着于,不要看到启动界面,但是又不想去掉启动界面. so 实现返回键执行home键方法. public boolean onKeyDown(int keyCode, Key ...
- PopupWindow 点击外部和返回键无法消失背后的真相(setBackgroundDrawable(Drawable background))
刚接手PopupWindow的时候,我们都可能觉得很简单,因为它确实很简单,不过运气不好的可能就会踩到一个坑: 点击PopupWindow最外层布局以及点击返回键PopupWindow不会消失 新手在 ...
- Android监听返回键、Home键+再按一次返回键退出应用
Android监听返回键需重写onKeyDown()方法 Home键keyCode==KeyEvent.KEYCODE_HOME @Override public boolean onKeyDown( ...
- Android 监听返回键、HOME键
拦截返回键,HOME键,继承BaseActivity即可 import android.app.Activity; import android.content.BroadcastReceiver; ...
- 关于iOS导航控制器隐藏和显示会出现返回键失效,导航栏标题动画异常
最近做的demo bug出现了,我觉得这个bug出现得很经典所以贴出来给大家看看, bug演示就是:点击返回键失效出现如下gif图演示的内容 为啥会出现如此奇葩的bug,系统的返回键居然失效了,尴尬 ...
- android 返回键 操作
cocos2dx项目移植到android平台上对于 android手机返回键,主菜单键等键的相关操作,本篇详细对返回键做个简单的介绍说明, 不足不对之处,请同猿们指出. 首先在主activity下,即 ...
- 【转】Android实现点击两次返回键退出
在做安卓应用是我们经常要判断用户对返回键的操作,一般为了防止误操作都是在用户连续按下两次返回键的时候提示用户是否退出应用程序. 第一种实现的基本原理就是,当按下BACK键时,会被onKeyDown捕获 ...
随机推荐
- 项目中使用的artTemplate笔记
1.注意数据格式为 var results = { data:[ {name:'xiaoming',age:'18'},{name:'xiaohong',age:'18'},{name:'xiaogo ...
- angular + socket.io+nodejs
一.服务器端: 基本和nodejs工程相同 https://www.cnblogs.com/xuanmanstein/p/10509445.html 安装socket.io npm i --save ...
- C# 动态生成的按钮及定义按钮的事件的代码
内容闲暇时间,把内容过程中比较常用的内容备份一下,如下的内容内容是关于C# 动态生成的按钮及定义按钮的事件的内容,应该对码农们也有用途. HtmlGenericControl control = ne ...
- 远程连接bat
@Echo offSet SERVER=10.40.61.101Set USERNAME=AdministratorSet PASSWORD=Marvin2008 Cmdkey /generic:TE ...
- dedecms织梦文章微信分享带缩略图与简介
dedecms V5.7二次开发 php5.6 mysql5.1 问题:dedecms文章分享到微信,带缩略图与简介.如下图: 1.准备工作 PHP 5.3+ 并且 curl扩展已经开启 微信服务号一 ...
- istio-opentracing链路追踪方案
目录 istio-opentracing链路追踪方案 envoy链路追踪 初始化追踪 跟踪上下文信息 istio链路追踪 链路追踪参数 采样率 jaeger istio中jaeger现状 jaeger ...
- http://zaojiasys.jianshe99.com 建造师数据泄漏,可以查看全部所有人的信息!
- Spring教程笔记(3) Bean
Bean配置项 id class必须项 如果根据id来获取bean,要写id:如果根据类型来配置bean,只写class就可以. scope作用域 constructor arguments prop ...
- mpvue学习笔记(一) 基础介绍
一. 小程序环境搭建 后台地址:https://mp.weixin.qq.com/ 文档地址:https://developers.weixin.qq.com/miniprogram/dev/ 注册账 ...
- MySql数据库通过idb和frm恢复
简单粗暴 恢复user表 1.先建立和之前user表一样的表结构.就是执行create table user .... ,执行完,数据库目录下就会建立user.ibd文件(当然还有其他的) 2.执行 ...