ionic 4 中监听返回键操作
时间:2019-11-05
本文章向大家介绍ionic 4 中监听返回键操作,主要包括ionic 4 中监听返回键操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
之前很久之前做过这样的返回键操作,当界面上有操作返回时退出此操作,当没有操作时退出本界面,主界面双击返回退出,之前看过了很多的文章,最后发现在ionic4中有一些代码已经不使用,自己修修补补完成了这样的操作,代码为app.component.ts中代码
import { Component } from '@angular/core'; import { Router, NavigationEnd } from '@angular/router'; import { Platform, NavController } from '@ionic/angular'; import { Toast } from '@ionic-native/toast/ngx'; import { AppMinimize } from '@ionic-native/app-minimize/ngx'; import { Subscription } from 'rxjs'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { ServicesService } from './services.service' @Component({ selector: 'app-root', templateUrl: 'app.component.html', providers: [AppMinimize] }) export class AppComponent { sideMenuDisabled = true; backButtonPressed: boolean = false; //用于判断是否退出 customBackActionSubscription: Subscription; url: any = '/tabs/index';//初始界面的url constructor( private platform: Platform, private router: Router, public navController: NavController,//导航控制器 public toast: Toast, private splashScreen: SplashScreen, private statusBar: StatusBar, public serve: ServicesService ) //上方所有注入 请自行搜索注入 { this.initializeApp(); this.initRouterListen(); this.platform.ready().then(() => { this.statusBar.styleDefault();//管理本机状态栏的外观,styleDefault使用默认状态栏(深色文本,浅色背景)。 this.statusBar.hide(); //显示和隐藏启动画面。 this.registerBackButtonAction();//注册返回按键事件 this.keyboardEvent(); this.platform.resume.subscribe();//弹出框 }); } private keyValue: any = false;//判断是否返回上一界面 registerBackButtonAction() { let that = this; this.customBackActionSubscription = this.platform.backButton.subscribe(() => { if (that.keyValue) { that.keyValue = false;//触发返回键操作,当为true时不返回上一界面 return; } if (this.serve.get("scan")) { this.serve.set("scan", false); return; }//此处为服务传值 if (that.url === '/tabs/index') {//判断是否是初始界面 if (that.backButtonPressed) { navigator['app'].exitApp(); that.backButtonPressed = false;//退出 } else { this.toast.show('再按一次退出应用', '1500', 'top').subscribe( toast => { console.log(toast); } ); that.backButtonPressed = true; setTimeout(() => that.backButtonPressed = false, 1500);//延时器改变退出判断属性 } } else { that.navController.back();//返回上一界面 } }); } initializeApp() { this.platform.ready().then(() => { this.statusBar.styleDefault(); this.splashScreen.hide(); }); } keyboardEvent() {//键盘触发 let that = this; window.addEventListener('native.keyboardshow', function () { that.keyValue = true;//键盘开启改变属性 }); window.addEventListener('native.keyboardhide', function () { setTimeout(() => { that.keyValue = false; }, 200)//延时器 }); } initRouterListen() { this.router.events.subscribe(event => { // 需要放到最后一个执行获取当前界面的url if (event instanceof NavigationEnd) { this.url = event.url; } }); } }
希望能帮到大家少走弯路
原文地址:https://www.cnblogs.com/liunian-yi/p/11799755.html
- Configure Many-to-Many relationship:
- 【关关的刷题日记64】Leetcode 110 Balanced Binary Tree
- 左手用R右手Python系列之——json序列化与反序列化
- 【干货】GAN调研:多极扩展(跨域和条件的GAN扩展模型调研)
- 【干货】TensorFlow实战——图像分类神经网络模型
- HTML5手机APP开发入(5)
- 这种自带黑科技的R包,请给我来一打
- 4927 线段树练习5
- codevs4919 线段树练习4
- 利用OpenCV和深度学习实现人脸检测
- 洛谷P2676 超级书架
- 洛谷P1720 月落乌啼算钱
- 2017.10.1解题报告
- 这个包绝对值得你用心体验一次!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法