Ionic 2 push child view inside the tabs View with side navigation - ionic-framework

Question

I have a problem in ionic 2+ menu navigation with tabs. When I click the navigation menu, how to access the child view inside the tabs view?
I found some solutions to access the tabs Rootpage but so far I couldn't access the Child view. If I push the child view Directly in app.component.ts the tabs are gone away. It will be hiding itself.
Here is my app.component.ts
import { AboutPage } from './../pages/about/about';
import { Component, ViewChild } from '#angular/core';
import { Events, MenuController, Nav, Platform, NavController } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { App } from 'ionic-angular';
import { ConferenceData } from '../providers/conference-data';
import { UserData } from '../providers/user-data';
export interface PageInterface {
title: string;
name: string;
component: any;
icon: string;
logsOut?: boolean;
index?: number;
tabName?: string;
tabComponent?: any;
}
#Component({
templateUrl: 'app.template.html'
})
export class TestApp {
#ViewChild(Nav) nav: Nav;
#ViewChild('mycontent') childNavCtrl: NavController;
appPages: PageInterface[] = [
{ title: 'ABOUT US', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage, index: 3, icon: 'assets/img/about-small.png' },
];
rootPage: any;
constructor(
public events: Events,
public userData: UserData,
public menu: MenuController,
public platform: Platform,
public confData: ConferenceData,
public storage: Storage,
public splashScreen: SplashScreen,
public appCtrl: App,
) {
}
openPage(page: PageInterface) {
let params = {};
if (page.index != null) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs() && page.index != undefined) {
// push the view here //
} else {
alert('else');
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
Here is my app.modules.ts
#NgModule({
declarations: [
testApp,
AboutPage,
AccountPage,
LoginPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(testApp, {}, {
links: [
{ component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
{ component: GalleryDetailsPage, name: 'Gallery details', segment: 'gallery Details' },
{ component: AboutPage, name: 'About', segment: 'about' },
]
}),
CloudModule.forRoot(cloudSettings),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
testApp,
AboutPage,
],
providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
ConferenceData,
UserData,
SocialSharing,
InAppBrowser,
Geolocation,
PostPage,
ImagePicker,
Camera,
SplashScreen
]
})
export class AppModule { }
here is my my app.template.html
<ion-content class="menu-contents">
<ion-list class="menu-con">
<button ion-item class="cus-item" menuClose *ngFor="let p of appPages" (click)="openPage(p)">
<!-- ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon -->
<img [src]="p.icon" class="menu-item-img {{p.title === 'POST' ? 'post-icon' : ''}}" alt=""><span class="menu-item-title">{{p.title}}</span>
</button>
</ion-list>
</ion-content>
here is my tabs page:
import { HomePage } from '../home/home';
import { Component } from '#angular/core';
import { NavParams, MenuController, NavController } from 'ionic-angular';
import { AboutPage } from '../about/about';
import { SchedulePage } from '../dash/schedule';
#Component({
selector : 'tabs-view',
templateUrl: 'tabs-page.html'
})
export class TabsPage {
// set the root pages for each tab
tab1Root:any;
tab2Root: any = SchedulePage;
tab3Root: any = AboutPage;
mySelectedIndex: number;
constructor(
navParams: NavParams,
public menu: MenuController,
public navCtrl: NavController,
) {
this.tab1Root = HomePage;
console.log('ONE', navParams.data);
if (navParams.data.tabIndex != null) {
}
}
ionViewDidLoad() {
this.menu.enable(true);
}
}
here is my tabs.html:
<ion-tabs [selectedIndex]="mySelectedIndex" name="weddingapp" #myTabs>
<ion-tab [root]="tab1Root" tabTitle="" tabIcon="icon-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="" tabIcon="icon-dash"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="" tabIcon="icon-user" class="custom-icon1">user</ion-tab>
Here is my Shedulepage.ts
#Component({
selector: 'page-schedule',
templateUrl: 'schedule.html'
})
export class SchedulePage {
#ViewChild('scheduleList', { read: List }) scheduleList: List;
constructor(
public alertCtrl: AlertController,
public app: App,
public loadingCtrl: LoadingController,
public modalCtrl: ModalController,
public navCtrl: NavController,
public toastCtrl: ToastController,
public confData: ConferenceData,
public user: UserData,
public menu: MenuController,
navParams: NavParams,
) {
console.log(navParams.data);
}
GotoLinks(val:any){
this.navCtrl.push(ContactPage);
}

Answer 1

If you want to push inside the child then what I have is
import { NavController} from 'ionic-angular';
constructor(public navCtrl: NavController){}
myFunction(){
this.navCtrl.push(SomePage);
}
If you want to push inside the tab page
import { App} from 'ionic-angular';
constructor(public app: App){}
myFunction(){
this.app.getRootNav().push(SomePage);
}