如何使用后退按钮关闭SideMenu并关闭Ionic上的App?

时间:2019-04-03 12:15:28

标签: typescript ionic-framework ionic4

我正在尝试编写一个代码,该代码按设备上的硬件backButton,检测是否打开了侧菜单,然后将其关闭,或者如果未打开,则返回是否可以关闭应用。

Int

withot menu.close的代码运行正常,该应用程序关闭或返回。但是当我插入menu.close时,仅关闭侧面菜单,而不关闭应用程序或返回。

1 个答案:

答案 0 :(得分:0)

尝试以下代码,它确实对我有用

    @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: ToastController) {
        this.initializeApp();

    }

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

    }

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 !== null) {
                    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.showToast();
                        this.lastTimeBackPress = new Date().getTime();
                    }
                }
            });
        });
    }

    async showToast() {
        let toast = await this.toast.create({
            message: `Press back again to exit App.`,
            duration: 2000,
            position: 'middle'
        });
        toast.present();
    }