ionic4监听返回事件 AppMinimize navController

1：引入Platform、ToastController、 Nav、 NavController

import { Platform, ToastController, Nav, NavController} from '@ionic/angular';

2：安装AppMinimize(可以最小化Android设备上的应用程序)

$ ionic cordova plugin add cordova-plugin-appminimize
$ npm install --save @ionic-native/app-minimize@beta
import {AppMinimize} from '@ionic-native/app-minimize/ngx';

注意因为是ionic4测试版本所以app-minimize后面要加@beta，以及引入的时候后面要加ngx

3：引入Subscription、SplashScreen、StatusBar
Subscription（https://segmentfault.com/a/1190000005059624）
SplashScreen（https://beta.ionicframework.com/docs/native/splash-screen/）
StatusBar（https://beta.ionicframework.com/docs/native/status-bar/）

import {Subscription} from 'rxjs';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';

3：在需要监听返回按钮的页面引入AppMinimize

import {AppMinimize} from "@ionic-native/app-minimize/ngx";@Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],providers:[AppMinimize]
})constructor(public platform: Platform,private appMinimize: AppMinimize,) {}

4：在app.module里面引入BackButtonService服务

import {BackButtonService} from './core/service/back-button.service';providers: [BackButtonService
]

5：代码

有this.platform.registerBackButtonAction(()=>{do something…})代码报错的情况。
是因为ionic4测试版本缺少注册自定义后退操作的功能platform.registerBackButtonAction，这个功能还没有被迁移，将功能platform.registerBackButtonAction迁移到ionic4
代码需要像以下一样进行迁移：

export class AppComponent {backButtonPressed: boolean = false; //用于判断返回键是否触发customBackActionSubscription: Subscription;  constructor(private platform: Platform,private appMinimize: AppMinimize,//可以最小化Android设备上的应用程序private app: App,public navController:NavController,//导航控制器public toastCtrl: ToastController,) {this.initRouterListen();this.platform.ready().then(() => {StatusBar.styleDefault();            // 管理本机状态栏的外观,styleDefault使用默认状态栏（深色文本，浅色背景）。SplashScreen.hide();                 // 显示和隐藏启动画面。this.registerBackButtonAction();     // 注册返回按键事件this.platform.resume.subscribe();    // 弹出框});}registerBackButtonAction () {this.customBackActionSubscription = this.platform.backButton.subscribe(() => {if (this.backButtonPressed) {this.appMinimize.minimize();console.log('最小化');this.backButtonPressed = false;} else {alert('再按一次退出应用');this.backButtonPressed = true;setTimeout(() => this.backButtonPressed = false, 2000);}}, 1);}
}

但是如果子页面返回的话应该先返回到主页面，然后在主页面点击退出
首先监听路由路径

import {Router, NavigationEnd} from '@angular/router';constructor(private router: Router) {}this.router.events.subscribe(event =>{if(event instanceof NavigationEnd){this.url = event.url  //this.url就是当前路由路径}
})registerBackButtonAction() {this.customBackActionSubscription = this.platform.backButton.subscribe(() => {if (this.url === '/home' || this.url === '/map' || this.url === '/camera') {if (this.backButtonPressed) {this.appMinimize.minimize();this.backButtonPressed = false;} else {alert('再按一次退出应用');this.backButtonPressed = true;setTimeout(() => this.backButtonPressed = false, 2000);}} else {this.navController.goBack();}}, 1);}

全部代码

import {Component, ViewChild} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {Platform, ToastController, Nav, App, NavController, Tabs} from '@ionic/angular';
import {AppMinimize} from '@ionic-native/app-minimize/ngx';
import {Subscription} from 'rxjs';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';@Component({selector: 'app-root',templateUrl: 'app.component.html',providers: [AppMinimize, App]
})export class AppComponent {sideMenuDisabled = true;backButtonPressed: boolean = false; //用于判断返回键是否触发customBackActionSubscription: Subscription;url;constructor(private platform: Platform,private router: Router,private appMinimize: AppMinimize,//可以最小化Android设备上的应用程序private app: App,public navController: NavController,//导航控制器public toastCtrl: ToastController,) {this.initRouterListen();this.platform.ready().then(() => {StatusBar.styleDefault();//管理本机状态栏的外观,styleDefault使用默认状态栏（深色文本，浅色背景）。SplashScreen.hide(); //显示和隐藏启动画面。this.registerBackButtonAction();//注册返回按键事件this.platform.resume.subscribe();//弹出框});}registerBackButtonAction() {this.customBackActionSubscription = this.platform.backButton.subscribe(() => {if (this.url === '/home' || this.url === '/map' || this.url === '/camera') {if (this.backButtonPressed) {this.appMinimize.minimize();this.backButtonPressed = false;} else {alert('再按一次退出应用');this.backButtonPressed = true;setTimeout(() => this.backButtonPressed = false, 2000);}} else {this.navController.goBack();}}, 1);}initRouterListen() {this.router.events.subscribe(event => { // 需要放到最后一个执行if (event instanceof NavigationEnd) {this.url = event.url;}});}
}

ionic4监听返回事件 AppMinimize navController相关推荐

jquery 监听返回事件
//监听返回事件,阻止返回上一页 $(document).ready(function(e) {if (window.history && window.history.pushSta ...
监听返回app_基于 Redis 消息队列实现 Laravel 事件监听及底层源码探究
在 Laravel 中,除了使用 dispatch 辅助函数通过 Illuminate\Bus\Dispatcher 显式推送队列任务外,还可以通过事件监听的方式隐式进行队列任务推送,在这个场景下,事 ...
android全局监听onkeydown,Android中的几个onTouch()事件、onKeyDown监听返回键无效
Android中的几个onTouch()事件.onKeyDown监听返回键无效一:Android中的几个onTouch()事件继承SimpleOnGestureListener,HahaGestu ...
【iOS-Cocos2d游戏开发之五】【1】多触点与触屏事件详解（单一监听、事件分发）...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html ...
python监听鼠标事件_Python中使用PyHook监听鼠标和键盘事件实例
Python 中使用 PyHook 监听鼠标和键盘事件实例 PyHook 是一个基于 Python 的"钩子"库,主要用于监听当前电脑上鼠标和键盘的事件.这个库依赖于另一个 Py ...
在Android中实现监听返回键，主键，菜单键
一.监听返回键 onKeyDown方法和onBackPressed方法 onKeyDown: 是当某个按键被按下是触发.所以也有人在点击返回键的时候去执行该方法来做判断.(该方法只是android ...
移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
Android监听返回键、Home键+再按一次返回键退出应用
Android监听返回键需重写onKeyDown()方法 Home键keyCode==KeyEvent.KEYCODE_HOME [java] view plaincopy @Override pub ...
百度地图自定义覆盖物，在手机上无法监听click事件
百度地图自定义覆盖物,在手机上无法监听click事件最近在做手机web端集成百度地图遇到了个坑儿:手机端不支持自定义覆盖物的click事件: 1.自带的marker是支持的(marker不属于自定义 ...

ionic4监听返回事件 AppMinimize navController

ionic4监听返回事件 AppMinimize navController相关推荐

最新文章

热门文章