app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Platform, Nav,App, AlertController,NavController,NavParams } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login'
import { HomePage } from '../pages/home/home';
import { LocationChangePage} from '../pages/location-change/location-change';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: NavController;
rootPage: any = LoginPage;
pages: Array<{ title: string, component: any }>;
constructor(public platform: Platform,
statusBar: StatusBar,
public alertCtrl: AlertController,
public app: App,
splashScreen: SplashScreen) {
platform.ready().then(() => {
statusBar.styleDefault();
splashScreen.hide();
platform.registerBackButtonAction(() => {
let nav = app.getActiveNavs()[0];
let activeView = nav.getActive();
if (activeView.name === "HomePage" || activeView.name === "LoginPage") {
if (nav.canGoBack()) { //Can we go back?
nav.pop();
} else {
const alert = this.alertCtrl.create({
title: 'Close App',
message: 'Do you want to exit?',
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Application exit prevented!');
}
}, {
text: 'Close App',
handler: () => {
this.platform.exitApp(); // Close this application
}
}]
});
alert.present();
}
}
});
});
this.pages = [
{ title: 'Stock In', component: HomePage },
{ title: 'Change Rack/Bin ', component: LocationChangePage }
];
}
openPage(page) {
console.log('page component'+page.component);
this.nav.push(page.component);
}
}
app.html
<ion-menu [content]="content" enable-menu-with-back-views="true">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
sidemenu icon disappears after navigation.?