Чтобы закрыть приложение с определенной страницы одним нажатием аппаратной кнопки назад

Мое приложение состоит из 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(() => {
            });
        });
      }


    }

приложение-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 одним нажатием.

Ответ 1

Попробуйте это:

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

Я надеюсь, что это поможет вам.

Ответ 2

Я публикую solution, который работал для меня, это может помочь другим пользователям.

Файл app.component.ts должен выглядеть следующим образом:

import { Component } from '@angular/core';
import { Platform, ToastController } from '@ionic/angular';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  counter = 0;

  constructor(
              public platform: Platform,
              public toastController: ToastController
  ) { 
    this.platform.ready().then(() => {
      document.addEventListener('backbutton', async () => {
          if (this.counter === 0) {
            this.counter++;
            this.alertToast();
            setTimeout(() => { this.counter = 0; }, 3000);
          } else {
            (navigator as any).app.exitApp();
          }
      });
    });
  }

  async alertToast() {
    const toast = await this.toastController.create({
      message: 'Press again to exit',
      duration: 300,
      position: 'middle',
    });
    toast.present();
  }


}

Ответ 3

Попробуйте этот фрагмент, который использует API-интерфейсы Ionic 4 и браузера:

if (this.platform.is("android")) {
    this.platform.backButton.subscribe(() => {
        if (window.location.pathname === "/home") {
            navigator['app'].exitApp();
        }
    });
}

Ответ 4

1) Импортируйте IonRouterOutlet в свой компонент

import { IonRouterOutlet } from '@ionic/angular';

2) добавление Viewchildren

  @ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;

3) И, наконец, написание кода в вашем компоненте

this.platform.backButton.subscribe(async() => {

this.routerOutlets.forEach((outlet: IonRouterOutlet) => {
  if (this.router.url.match('/home')) {
            navigator['app'].exitApp(); // work for ionic 4
  };

}) });