[英]My Hardware 'Back Button Action' is not working in Ionic 4
我在我的 Ionic 4 应用程序中工作,当用户在移动后退按钮上单击 2 次时,它应该关闭应用程序,但这并没有发生。
这是我的app.component.ts :
lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(){
this.backButtonEvent();
}
backButtonEvent() {
document.addEventListener("backbutton", () => {
this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
} else if (this.router.url === '/tabs/tab1') {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
navigator['app'].exitApp(); //Exit from app
} else {
this.presentAlertConfirm();
this.lastTimeBackPress = new Date().getTime();
}
// navigator['app'].exitApp(); // work for ionic 4
}
});
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
}
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}
]
});
await alert.present();
}
当我在首页(Tab1)上时这是有效的,当我在其他标签上时它不起作用并且不会进入头版。
我认为问题出在我的 ( outlet && outlet.canGoBack())
因为这不起作用。 我正在使用选项卡主题,当用户没有其他选项卡并单击硬件后退按钮时,我可以将路由发送到主选项卡。
我正在使用 Ionic 4 标签主题。
任何帮助深表感谢。
尝试这个:
lastTimeBackPress = 0; timePeriodToExit = 2000; @ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ; backButtonEvent() { document.addEventListener("backbutton", async() => { try { const element = await this.modalCtrl.getTop(); if (element) { element.dismiss(); return; } } catch (error) { console.log(error); } this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => { if (this.router.url != '/tabs/tab1') { await this.router.navigate(['/tabs/tab1']); } else if (this.router.url === '/tabs/tab1') { if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) { await this.presentAlertConfirm(); this.lastTimeBackPress = new Date().getTime(); } navigator['app'].exitApp(); // work for ionic 4 } }); }); }
并在构造函数中调用这个函数。 这解决了我的问题,因为我使用的是标签主题和outlet.pop();
没有工作。 所以我尝试了这个方法。
这样做。
constructor(private platform: Platform) {
this.platform.backButton.subscribe(() => {
});
}
为了回应@Raghav 的评论,我会这样尝试:
lastTimeBackPress = 0; timePeriodToExit = 2000; @ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ; constructor(private platform: Platform) { this.backButtonEvent(); } backButtonEvent() { this.platform.backButton.subscribeWithPriority(0, () => { this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => { if (this.router.url != '/tabs/tab1') { await this.router.navigate(['/tabs/tab1']); } else if (this.router.url === '/tabs/tab1') { if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) { this.lastTimeBackPress = new Date().getTime(); this.presentAlertConfirm(); } else { navigator['app'].exitApp(); } } }); }); } async presentAlertConfirm() { const alert = await this.alertController.create({ // header: 'Confirm!', message: 'Are you sure you want to exit the app?', buttons: [{ text: 'Cancel', role: 'cancel', cssClass: 'secondary', handler: (blah) => {} }, { text: 'Close App', handler: () => { navigator['app'].exitApp(); } }] }); await alert.present(); }
那是因为您在平台准备就绪之前调用了 registerBackButtonAction。 平台准备好后,您必须订阅后退按钮。 一个接近:
this.platform.ready().then(
() => {
this.platform.registerBackButtonAction(() => {
this.platform.exitApp();
});
}
);
在你的 app.component.ts 中试试这个
lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChild(IonRouterOutlet, { static: false }) routerOutlets: IonRouterOutlet
constractor( private router: Router, private alertController: AlertController){this.backbutton()}
backbutton() {
console.log('backbutton')
document.addEventListener("backbutton", () => {
console.log('backbutton1')
if (this.routerOutlets && this.routerOutlets.canGoBack()) {
this.routerOutlets.pop();
}
// else if (this.router.url != '/tabs/tabs/tab1') {
// this.router.navigate(['/tabs/tabs/tab1']);
// }
else if (this.router.url === '/home') {
if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
this.lastTimeBackPress = new Date().getTime();
this.presentAlertConfirm();
} else {
navigator['app'].exitApp();
}
}
});
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
// header: 'Confirm!',
message: 'Are you sure you want to exit the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => { }
}, {
text: 'Close App',
handler: () => {
navigator['app'].exitApp();
}
}]
});
await alert.present();
}
您也可以尝试以下代码片段,
在app.component.ts文件中进行更改或添加这样的代码
import { Component, ViewChildren, QueryList } from '@angular/core';
import { Platform, IonRouterOutlet, ToastController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
//code for exit app
// set up hardware back button event.
lastTimeBackPress = 0;
timePeriodToExit = 2000;
//code for exit app
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private toastController: ToastController,
private router: Router
) {
this.initializeApp();
// Initialize BackButton Eevent.
this.backButtonEvent();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleLightContent();
this.splashScreen.hide();
});
}
// active hardware back button
backButtonEvent() {
this.platform.backButton.subscribe(async () => {
this.routerOutlets.forEach(async (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 {
const toast = await this.toastController.create({
message: 'Press back again to exit App.',
duration: 2000,
position: 'middle'
});
toast.present();
// console.log(JSON.stringify(toast));
this.lastTimeBackPress = new Date().getTime();
}
}
});
});
}
}
在您的home.ts文件中或您希望用户退出应用程序页面的位置进行更改或添加这样的代码。
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public subscription: any;
constructor(private platform: Platform) { }
ionViewDidEnter() {
this.subscription = this.platform.backButton.subscribe(() => {
navigator['app'].exitApp();
});
}
ionViewWillLeave() {
this.subscription.unsubscribe();
}
}
试试这个
import {Component, QueryList, ViewChildren} from '@angular/core';
import {IonRouterOutlet, Platform, ToastController} 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 {Location} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
lastTimeBackPress = 0;
timePeriodToExit = 2000;
// @ts-ignore
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private toastController: ToastController,
private router: Router,
private location: Location
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.backButtonEvent();
});
}
// active hardware back button
backButtonEvent() {
this.platform.backButton.subscribeWithPriority(0, () => {
this.routerOutlets.forEach(async () => {
if (this.router.url !== '/tabs/home') {
await this.location.back();
} else {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
navigator['app'].exitApp(); // work in ionic 4
} else {
const toast = await this.toastController.create({
message: 'Press back again to exit App.',
duration: 2000,
position: 'middle'
});
toast.present();
// console.log(JSON.stringify(toast));
this.lastTimeBackPress = new Date().getTime();
}
}
});
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.