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.
Contrast:

• Difference

• Same points
  Understand according to the angel service, because ionic is developed based on angel. The concept understanding based on angular is the most intuitive. Can be identified by @ Injectable(), and can be used to rely on injection.
  For details, please refer to the angular service article
  angular dependency injection
  Angular4 dependency injection of learning notes

Create processing service for return key

My service has changed the path several times, and the final path is under src/providers/utils /
back-button-service.ts

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

@Injectable()
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()) {
        activeNav.pop();
      } else {
        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {
          //Execution exit
          this.showExit();
        } else {
          //Select the first label on the home page
          tabRef.select(0);
        }
      }
    });
  }

  //Exit application method
  private showExit(): void {
    //If sotrue，Sign out
    if (this.backButtonPressed) {
      this.platform.exitApp();
    } else {
      //First press, pop upToast
      this.toastCtrl.create({
        message: 'Press again to exit the app',
        duration: 2000,
        position: 'top'
      }).present();
      //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>
</ion-tabs>

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(() => {
      this.backButtonService.registerBackButtonAction(this.tabRef);
    });
  }

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