请在ionic3中找到以下有关Android硬件后退按钮操作的代码。当Ionic4使用角路由进行导航时，后退按钮的弹出事件将如何发生？如果要跳至最后一页，可以使用以下代码this.navCtrl.goBack('/products');。
但是我们如何在ionic4中将其用于android硬件后退按钮操作？
this.platform.registerBackButtonAction(() => {
let activePortal = this.ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
} else {
if (this.nav.canGoBack()) {
***this.nav.pop();***
} else {
if (this.nav.getActive().name === 'LoginPage') {
this.platform.exitApp();
} else {
this.generic.showAlert("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
}
}
}
});
答案 0 :(得分：8)
更新：此问题已在dfac9dc
中修复 Related: ionic4 replacement for registerBackButtonAction
这在GitHub，Iconic Forum和Twitter中被跟踪
在没有正式修复之前，您可以使用下面的解决方法。
使用 platform.backButton.subscribe（请参阅here）platform.backButton.subscribeWithPriority(0, ...) 让离子处理程序关闭所有模态/警报/ ... < / strong> ，当its own back button is pressed和新的router-controller一起使用时，离子代码将使用如下代码：
import { ViewChild } from '@angular/core';
import {
IonRouterOutlet,
Platform
} from '@ionic/angular';
import {
Router
} from '@angular/router';
//...
/* get a reference to the used IonRouterOutlet
assuming this code is placed in the component
that hosts the main router outlet, probably app.components */
@ViewChild(IonRouterOutlet) routerOutlet: IonRouterOutlet;
constructor(
...
/* if this is inside a page that was loaded into the router outlet,
like the start screen of your app, you can get a reference to the
router outlet like this:
@Optional() private routerOutlet: IonRouterOutlet, */
private router: Router,
private platform: Platform
...
) {
this.platform.backButton.subscribeWithPriority(0, () => {
if (this.routerOutlet && this.routerOutlet.canGoBack()) {
this.routerOutlet.pop();
} else if (this.router.url === '/LoginPage') {
this.platform.exitApp();
// or if that doesn't work, try
navigator['app'].exitApp();
} else {
this.generic.showAlert("Exit", "Do you want to exit the app?", this.onYesHandler, this.onNoHandler, "backPress");
}
});
}
答案 1 :(得分：7)
尝试一下： app.comonent.ts
import { Component, ViewChildren, QueryList } from '@angular/core';
import { Platform, ModalController, ActionSheetController, PopoverController, IonRouterOutlet, MenuController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
import { Toast } from '@ionic-native/toast/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
// set up hardware back button event.
lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public modalCtrl: ModalController,
private menu: MenuController,
private actionSheetCtrl: ActionSheetController,
private popoverCtrl: PopoverController,
private router: Router,
private toast: Toast) {
// Initialize app
this.initializeApp();
// Initialize BackButton Eevent.
this.backButtonEvent();
}
// active hardware back button
backButtonEvent() {
this.platform.backButton.subscribe(async () => {
// close action sheet
try {
const element = await this.actionSheetCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
}
// close popover
try {
const element = await this.popoverCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
}
// close modal
try {
const element = await this.modalCtrl.getTop();
if (element) {
element.dismiss();
return;
}
} catch (error) {
console.log(error);
}
// close side menua
try {
const element = await this.menu.getOpen();
if (element) {
this.menu.close();
return;
}
} catch (error) {
}
this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
} else if (this.router.url === '/home') {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
// this.platform.exitApp(); // Exit from app
navigator['app'].exitApp(); // work in ionic 4
} else {
this.toast.show(
`Press back again to exit App.`,
'2000',
'center')
.subscribe(toast => {
// console.log(JSON.stringify(toast));
});
this.lastTimeBackPress = new Date().getTime();
}
}
});
});
}
}
在ionic v4 beta中对我有用
答案 2 :(得分：1)
对于Ionic4，我尝试了这种方法，对我来说效果很好。
进入视图时，我会将其订阅到变量中，离开视图时将其取消订阅。这样返回按钮上退出的应用程序将仅针对该特定页面执行。
constructor(private platform: Platform){}
backButtonSubscription;
ionViewWillEnter() {
this.backButtonSubscription = this.platform.backButton.subscribe(async () => {
navigator['app'].exitApp();
});
}
}
ionViewDidLeave() {
this.backButtonSubscription.unsubscribe();
}
答案 3 :(得分：0)
这就是我在我的应用程序中所做的工作（使用ionic4在Android应用程序中开发）。因此，当用户在Android手机上单击回来时，应用程序退出。
示例代码：
import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent implements AfterViewInit, OnDestroy {
constructor(private platform: Platform) { }
backButtonSubscription;
ngAfterViewInit() {
this.backButtonSubscription = this.platform.backButton.subscribe(() => {
// add logic here if you want to ask for a popup before exiting
navigator['app'].exitApp();
});
}
ngOnDestroy() {
this.backButtonSubscription.unsubscribe();
}
}
源：here
答案 4 :(得分：0)
使用cordova事件“后退按钮”
document.addEventListener("backbutton", youFunction, false);
我使用ionic4 / vue并有效
答案 5 :(得分：0)
这是我在 Ionic 5项目上的工作代码。 使用Cordova / PhoneGap
import {Component} from '@angular/core';
import {ToastService} from './_services/toast.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(private toastCtrl: ToastService) {
this.backButton();
}
backButton() {
const that = this;
let lastTimeBackPress = 0;
const timePeriodToExit = 2000;
function onBackKeyDown(e) {
e.preventDefault();
e.stopPropagation();
if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
navigator.app.exitApp();
} else {
that.presentToast();
lastTimeBackPress = new Date().getTime();
}
}
document.addEventListener('backbutton', onBackKeyDown, false);
}
presentToast() {
const toast = this.toastCtrl.create({
message: "Press again to exit",
duration: 3000,
position: "middle"
});
toast.present();
}
}
答案 6 :(得分：0)
在Ionic 4中自定义Android后退按钮 ... ...每页明智地退回。
步骤1：import { Platform, NavController } from '@ionic/angular';
第2步：constructor(public navCtrl: NavController){}
第3步：
private async onBack() {
this.navCtrl.navigateBack('/project-details');
}
第4步：
this.platform.backButton.subscribe(()=>{
this.onBack();
});