Ответ 1
Попробуйте это:
document.addEventListener('backbutton', function(event){
event.preventDefault();
navigator.app.exitApp(); // exit the app
});
Я надеюсь, что это поможет вам.
Мое приложение состоит из 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
одним нажатием.
Попробуйте это:
document.addEventListener('backbutton', function(event){
event.preventDefault();
navigator.app.exitApp(); // exit the app
});
Я надеюсь, что это поможет вам.
Я публикую 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();
}
}
Попробуйте этот фрагмент, который использует API-интерфейсы Ionic 4 и браузера:
if (this.platform.is("android")) {
this.platform.backButton.subscribe(() => {
if (window.location.pathname === "/home") {
navigator['app'].exitApp();
}
});
}
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
};
}) });