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