Ionic 4 navigate through tabs with hardware back button / side effect: close pages and reopen pages

@shorstmann wrote:

Hello,

in ionic 4 app i implemented some functionality to activate the hardware back button. If i open a detail-page from within a tabbed page the hardware back button already navigates back to the tabbed page that opened the detail-page.

Now i want the tab-pages to be able to be “run through” by hitting the hardware button (so if ia am on tab 1 and tap on tab 3 i want to come back to tab 1 when hitting the back button). To do this i am able to use

window.history.back();

But now i have the side-effect, that when i have opened a detail-page from within one tab-page and hit the hardware back button the app will close the detail-page (as intended) but reopens it because of “window.history.back()”. Somehow the condition “this.router.url” does not work correct. I am not able to determine that the active page is my detail-page. How do i do this?

snippet from my app.component.ts

// active hardware back button
    backButtonEvent() {
        this.platform.backButton.subscribe(async () => {
            // close action sheet
            try {
                const element = await this.actionSheetCtrl.getTop();
                if (element) {
                    console.log("actionSheet close");
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close popover
            try {
                const element = await this.popoverCtrl.getTop();
                if (element) {
                    console.log("popoverCtrl close");
                    element.dismiss();
                    return;
                }
            } catch (error) {
            }

            // close modal
            try {
                const element = await this.modalCtrl.getTop();
                if (element) {
                    console.log("modalCtrl close");
                    element.dismiss({cancelledModal: true});
                    return;
                }
            } catch (error) {
                console.log(error);

            }

            // close side menua
            try {
                const element = await this.menu.getOpen();
                if (element) {
                    console.log("sideMenu close");
                    this.menu.close();
                    return;

                }

            } catch (error) {

            }

            this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
                if (outlet && outlet.canGoBack()) {
                    console.log("outlet pop");
                    outlet.pop();

                } else (this.router.url === '/menu/tabs/tab1' || this.router.url === '/login') {
                    if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
                        navigator['app'].exitApp(); // work in ionic 4
                    } else {
                        this.alertProvider.presentToast('Press back again to exit App');
                        this.lastTimeBackPress = new Date().getTime();
                    }
                } else if (this.router.url === '/menu/tabs/tab2' || this.router.url === '/menu/tabs/tab3') {
                    //Go trough tabs
                    console.log("do window history back");
                    window.history.back();
                }
            });
        });
    }

Posts: 1

Participants: 1

Read full topic