離子2推子視圖內的標籤查看與側面導航

Question

我有一個離子2+菜單導航與選項卡的問題。當我點擊導航菜單時，如何訪問標籤視圖內的子視圖？

我發現一些solutions來訪問標籤的根頁面，但到目前爲止我無法訪問子視圖。如果我直接在app.component.ts中推送子視圖，則選項卡將消失。它會隱藏自己。

這裏是我的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}`); 
     }); 
    } 

這裏是我的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 { } 

這裏是我的我的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> 

這裏是我的標籤頁：

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


} 

這裏是我的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> 

這裏是我的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); 
}