Ionic 2 将子视图推送到带有侧面导航的选项卡视图内

Question

我在带有选项卡的离子 2+ 菜单导航中遇到问题。当我单击导航菜单时，如何访问选项卡视图中的子视图？

我找到了一些访问选项卡根页面的解决方案，但到目前为止我无法访问子视图。如果我直接在app.component.ts中推送子视图，选项卡就会消失。它将隐藏自己。

这是我的应用程序.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}`);
});
}

这是我的应用程序。

@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 { }

这是我的应用程序模板.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>

这是我的标签页面：

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);
}

}

这是我的标签.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>

这是我的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

如果你想推入孩子的内心，那么我所拥有的是

import { NavController} from 'ionic-angular';
constructor(public navCtrl: NavController){}
myFunction(){
this.navCtrl.push(SomePage);
}

如果要在标签页内推送

import { App} from 'ionic-angular';
constructor(public app: App){}
myFunction(){
this.app.getRootNav().push(SomePage);
}