我的硬件“后退按钮操作"在Ionic 4中不起作用 [英] My Hardware 'Back Button Action' is not working in Ionic 4
问题描述
我正在使用Ionic 4应用程序,当用户在移动后退按钮上单击2次时,它应该关闭该应用程序,但这没有发生.
I am working in my Ionic 4 app and When the user clicks 2 times on the mobile back button, then it should close the app but this is not happening.
这是我的 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)上并且在其他选项卡上时,它却无法正常工作且无法转到首页,这是正常的.
This is working when I am on front page(Tab1) and when I am on the other tabs it is not working and not going to the front page.
我认为问题出在我的(outlet && outlet.canGoBack())
,因为这不起作用.我正在使用选项卡主题,并且当用户没有其他选项卡并单击硬件后退按钮时,可以将路由发送到主选项卡吗?
I think the problem is in my (outlet && outlet.canGoBack())
because this is not working. I am using the tab theme and Can I send the route to the main tab when the user is no other tabs and clicks the hardware back button.
我正在使用Ionic 4标签主题.
I am using Ionic 4 tab theme.
非常感谢您的帮助.
推荐答案
为回应@Raghav评论,我会这样尝试:
In response to @Raghav comment, I would try it like this:
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();
}
这篇关于我的硬件“后退按钮操作"在Ionic 4中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!