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

Ionic 2推动标签内的子视图使用侧面导航查看

1 个答案: