首页 > 解决方案 > 使用离子构建混合移动应用程序并面临硬件后退按钮问题

问题描述

我正在使用离子开发移动应用程序。我面临的问题是,当我单击硬件后退按钮时,它使我进入菜单屏幕,我希望出现对话框,显示“您确定要退出吗?”,尽管我已经添加了代码仅当我触摸应用程序中的任何位置时才起作用,但如果我不触摸任何位置,它会使我进入我想避免的菜单屏幕,因为我想在单击后退按钮时显示对话框。我怎样才能做到这一点?我已在 Component.ts 文件的登录、仪表板和欢迎页面中添加了此代码。下面是代码:

ionViewDidEnter() {

this.platform.backButton.subscribeWithPriority(0, () => {
  if (this.routerOutlet && this.routerOutlet.canGoBack()) {
    this.routerOutlet.pop();
  } else if (this.router.url === '/login' || this.router.url === '/dashboard'
    || this.router.url === '/welcome') {
    var exitSure = confirm("Are you sure you want to exit?");
    if (exitSure) {
      navigator['app'].exitApp();
      
    }
  } else {
    this.location.back();
  }
});

}

标签: androidangularjsionic-frameworkhybrid

解决方案


此代码可能对您有所帮助。该对话框仅在登录页面、仪表板页面、欢迎页面显示。
app.component.ts

 initializeApp() {
  this.platform.ready().then(() => {
   this.statusBar.styleDefault();
   this.splashScreen.hide();
   this.platform.backButton.subscribe(async () => {
     if (this.router.isActive('/login', true) && this.router.url === '/login') {
       //Your dialog box Cod
       navigator['app'].exitApp();
     } else if (this.router.isActive('/dashboard', true) && this.router.url === '/dashboard') {
       //Your dialog box Cod
       navigator['app'].exitApp();
     } else if (this.router.isActive('/welcome', true) && this.router.url === '/welcome') {
       //Your dialog box Cod
       navigator['app'].exitApp();
     }
   });
 });
}

推荐阅读