只需单击硬件后退按钮即可从特定页面关闭应用程序

Question

我的应用程序包含2个页面，分别称为login，home以及其他延迟加载的页面modules。在app.component.ts中写入条件，以便如果localStorage为空，则应路由到login页面，否则应路由到home页面。然后从首页用户将路由其他延迟加载的模块

app.component.ts

    import { Component } from '@angular/core';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';
    import { Platform, NavController } from '@ionic/angular';

    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html'
    })
    export class AppComponent {

      constructor(
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private platform: Platform,
        public navCtrl: NavController,
      ) {
        this.initializeApp();
        if (localStorage.getItem('token') !== null) {
          this.navCtrl.navigateRoot('/home');
        } else {
          this.navCtrl.navigateRoot('/login');
        }
      }

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


    }

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

    const routes: Routes = [

      {path: 'home',loadChildren: './home/home.module#HomePageModule'},
      { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
      { path: '', loadChildren: './nav-bar/nav-bar.module#NavBarPageModule' },  <===== Lazy loaded module
      { path: '', loadChildren: './nav-bar-provider/nav-bar-provider.module#NavBarProviderPageModule' }, <===== Lazy loaded module
    ];

    @NgModule({
      imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

这种情况很好。然后在home页面中，我编写了两次双击退出应用程序的代码，如下所示：

home.page.ts

    import { Component , OnInit} from '@angular/core';
    import { Platform } from '@ionic/angular';
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage implements OnInit {
      subscription;
      constructor(public platform: Platform) {}

      ngOnInit() {}

      ionViewDidEnter() {
        this.subscription = this.platform.backButton.subscribe(() => {
          (navigator as any).app.exitApp();
        });
      }
      ionViewDidLeave() {
        this.subscription.unsubscribe();
      }
    }

现在的问题是：On double tap in home page,the app will close, But on single tap it will routed 1st lazy loaded module(i,e NavBarPageModule). How can avoid this?对于此问题，我尝试router-path将延迟加载的模块分配如下：

    const routes: Routes = [

      {path: 'home',loadChildren: './home/home.module#HomePageModule'},
      { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
      { path: 'nav-bar', loadChildren: './nav-bar/nav-bar.module#NavBarPageModule' }, 
      { path: 'nav-bar-provider', loadChildren: './nav-bar-provider/nav-bar-provider.module#NavBarProviderPageModule' },
    ];

然后我无法lazy loaded modules从home页面路由到。

我只想home page通过单击关闭应用程序。

Answer 1

尝试这个：

document.addEventListener('backbutton', function(event){
  event.preventDefault();
  navigator.app.exitApp(); // exit the app
});

我希望这能帮到您。