Minggu, 17 Maret 2019

My Hardware 'Back Button Action' is not working in Ionic 4

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.

This is my app.component.ts:


initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.platform.registerBackButtonAction(() => {
this.platform.exitApp();
});
});
}

This wont work in Ionic 4. So I tried some method.

Other Method: app.component.ts:


initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
document.addEventListener("backbutton", () => {
navigator['app'].exitApp();
});
});

This is working but the problem is that when the user clicks on the mobile back button it closes the app. Whether the user is not on front page and without clicking the mobile back button 2 times it closes the app.

I have tried some other method: app.component.ts:


lastTimeBackPress = 0;
timePeriodToExit = 2000;
@ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
backButtonEvent() {
document.addEventListener("backbutton", () => {
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);
}

this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
if (outlet && outlet.canGoBack()) {
outlet.pop();
} else if (this.router.url === '') {
if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
this.platform.exitApp(); Exit from app
navigator['app'].exitApp(); work for 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();
}
}
});
});
}

I have called this function in the constructor but this is not working.

I am using Ionic 4 tab theme.

Any help is much appreciated.



from My Hardware 'Back Button Action' is not working in Ionic 4

My Hardware 'Back Button Action' is not working in Ionic 4 Rating: 4.5 Diposkan Oleh: Admin

0 komentar:

Posting Komentar

Popular Posts