Hey! I’m starting to use the new split-pane and I’m having issues. I have a “marketplace” side of my app and an “admin” side of my app. I’d like the marketplace side to use a side menu and the admin side to use the new split pane.
The issue I’m having is whichever one I set to load first in my app.component “wins” and has its menu show correctly, and the other one when navigated to doesn’t have its nav show up. Here are the components.
Does split pane only work when it is on the app.components nav? Am I doing something wrong?
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { AuthService } from '../providers/auth.service';
// import { Page1 } from '../pages/page1/page1';
import { Marketplace } from './marketplace.component';
import { Admin } from '../pages/admin/admin.component';
import { ENV } from '../config/environment';
@Component({
template: `
<ion-nav [root]="rootPage" #content></ion-nav>
`
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = Admin;
constructor(
public platform: Platform,
public authService: AuthService) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, App } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { AuthService } from '../providers/auth.service';
import { Page1 } from '../pages/page1/page1';
import { Admin } from '../pages/admin/admin.component';
@Component({
template: `
<ion-menu [content]="marketplace">
<ion-header>
<ion-toolbar>
<ion-title>Marketplace Menu</ion-title>
</ion-toolbar>
<button menuClose ion-item (click)="goToAdmin()">
Admin
</button>
</ion-header>
</ion-menu>
<ion-nav [root]="rootPage" #marketplace swipeBackEnabled="false"></ion-nav>
`
})
export class Marketplace {
@ViewChild(Nav) nav: Nav;
rootPage: any = Page1;
constructor(
public platform: Platform,
public authService: AuthService,
public appCtrl: App) {}
goToAdmin() {
this.appCtrl.getRootNav().setRoot(Admin);
}
}
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Nav, App } from 'ionic-angular';
import { AdminHome } from './admin-home.component';
import { Marketplace } from '../../app/marketplace.component';
@Component({
selector: 'admin',
template: `
<ion-split-pane>
<!-- our side menu -->
<ion-menu [content]="adminContent">
<ion-header>
<ion-toolbar>
<ion-title>Admin Menu</ion-title>
</ion-toolbar>
<button menuClose ion-item (click)="goToMarketplace()">
MarketPlace
</button>
</ion-header>
</ion-menu>
<!-- the main content -->
<ion-nav [root]="root" main #adminContent></ion-nav>
</ion-split-pane>
`
})
export class Admin {
root: any = AdminHome;
constructor(
public appCtrl: App
) {
}
goToMarketplace() {
this.appCtrl.getRootNav().setRoot(Marketplace);
}
}