The processing of Android return key in ionic 3 learning

Keywords: angular Android simulator

The processing of Android return key in ionic 3 learning

About provider

Understand the provider of ionic3
provider is a concept defined by ionic itself, similar to our service on angular. There are some similarities and differences between the two.

  • Difference
technology Commands used file name Route Class name
ionic ionic g provider config config.ts Under providers/config ConfigProvider
angular ng g service config config.service.ts Under the directory of the folder created by the file ConfigService

Create processing service for return key

My service has changed the path several times, and the final path is under src/providers/utils /

import { Injectable } from '@angular/core';
import { Platform, ToastController, App, NavController, Tabs } from 'ionic-angular';

export class BackButtonServiceProvider {

  //Controls whether the hardware return button is triggered. Defaultfalse
  backButtonPressed: boolean = false;

  //Constructor dependency injection
  constructor(public platform: Platform,
              public appCtrl: App,
              public toastCtrl: ToastController) { }

  //Registration method
  registerBackButtonAction(tabRef: Tabs): void {

    //registerBackButtonAction It's the system's own way
    this.platform.registerBackButtonAction(() => {
      //Obtain NavController
      let activeNav: NavController = this.appCtrl.getActiveNav();

      // Some bloggers said that the above method was removed in the new version, but I can continue to use it when testing. The following code is a new way of using, and I also posted it.   
      // let activeNav: NavController = this.appCtrl.getActiveNavs()[0];

      //If you can return to the previous page, execute pop
      if (activeNav.canGoBack()) {
      } else {
        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {
          //Execution exit
        } else {
          //Select the first label on the home page

  //Exit application method
  private showExit(): void {
    //If sotrue,Sign out
    if (this.backButtonPressed) {
    } else {
      //First press, pop upToast
        message: 'Press again to exit the app',
        duration: 2000,
        position: 'top'
      //Marked astrue
      this.backButtonPressed = true;
      //Mark in two secondsfalse,If you quit, it won't work
      setTimeout(() => this.backButtonPressed = false, 2000);

Services that inject return processing logic

Step 1: modify tab.html

// Add "myTabs" property
<ion-tabs #myTabs>

Step 2: modify tab.ts

// Introduce modules to be used
import {Component, ViewChild} from '@angular/core';
import {NavParams, Platform, Tabs} from 'ionic-angular';
import {BackButtonServiceProvider} from "../../providers/utils/back-button-service";
// Add code to class
@ViewChild('myTabs') tabRef: Tabs;

constructor(public navParams: NavParams,
              public platform: Platform,
              public backButtonService: BackButtonServiceProvider) {

    platform.ready().then(() => {

Now we have finished the modification. You need to debug and view it on the simulator or android phone.

Posted by nabeelkhan on Thu, 26 Mar 2020 09:53:08 -0700