ionic4监听返回事件 AppMinimize navController

20 篇文章 0 订阅
20 篇文章 0 订阅

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;
            }
        });
    }
}
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值