ionic4 android 返回键问题 2019-04-14

ionic4 不配置代码的时候android自带的返回键是没有效果的。我们采用的是这种方式:

import { Component, HostListener } from '@angular/core';

 @HostListener('document:ionBackButton', ['$event'])
  private overrideHardwareBackAction($event: any) {
    $event.detail.register(100, async () => {
      // Do what you want
      this.router.navigateByUrl('相应路径');
    });
  }

但是其中填写跳转路径的话每个页面都要配置此代码。

因为我们公司项目中每个子页面右上角都有返回键:
微信图片_20190414102559.jpg

所以我就在这里处理了:
子页面代码:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button [defaultHref]="defaultHref" text="返回" id='backButton'></ion-back-button>
    </ion-buttons>
    <ion-title style="margin-left: 11%">人员新参保</ion-title>
  </ion-toolbar>
</ion-header>

在没有返回键的页面,比如tab页面和login页面中增加

<input id="backButtonTab" type="hidden" (click)='backMethod()' />

backMethod(){
   //do what you want
  }

在tabs-page.ts 中

  @HostListener('document:ionBackButton', ['$event'])
  private overrideHardwareBackAction($event: any) {
    $event.detail.register(100, async () => {
      // Do what you want

      let tmp = document.getElementById("backButton");

      if(tmp){
        tmp.click();
      }else{
        document.getElementById("backButtonTab").click();
      }
    });
  }

需要不同的返回键功能的时候加入相应的click方法就可以了,

以上是我的解决方法,如果大佬有更好的解决方法,请告诉小弟啊。

转发请标明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,537评论 0 17
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • “人生的道路虽然漫长,但紧要处常常只有几步,特别是当人年轻的时候。”——路遥 高加林的人生轨迹,从县里...
    如初不变阅读 294评论 0 0