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;}});} }

總結

以上是生活随笔為你收集整理的ionic4监听返回事件 AppMinimize navController的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。