Angular 选项卡根元素不可见

我正在构建ionic应用程序，它有多帐户切换选项。我的问题是第一次它的选项卡根元素页面可见很好，但当它切换到另一个具有特定选项卡的帐户时，它在呈现页面之前可见。我将显示我的代码，以便您更好地理解

应用程序组件.ts

import {Component, ViewChild} from '@angular/core';
import {Nav, Platform, PopoverController} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {AuthProvider} from "../providers/auth";
import {SwitchAccountService} from "../providers/switch-account";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any;
  @ViewChild(Nav) nav: Nav;
  authentication:boolean=false;

  constructor(public platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeApp(statusBar, splashScreen);

  }

  initializeApp(statusBar: StatusBar,
                splashScreen: SplashScreen) {

    this.platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      this.auth.onSessionStore.subscribe(() => {

        if (this.auth.isAuthenticated == true) {
          this.authentication =true;
          this.initializeTabs();
        }else{
          this.authentication =false;
          this.nav.setRoot('login-page');
        }

      })

    })
  }

  initializeTabs(){

    setTimeout(() => {

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });

    }, 1000);

  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs');
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs');
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs');
      }else{
        this.nav.setRoot('page-students-tabs');
      }
    }



  }


  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create('page-popover');
    popover.present({
      ev: myEvent
    });
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_ADMIN_TABS} from "../../constants";

@IonicPage({
  name: 'page-admin-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-admin-tabs',
  templateUrl: 'admin-tabs.html',
})
export class AdminTabsPage {

  adminTabs =APP_ADMIN_TABS;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidEnter() {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AdminTabsPage');
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_TEACHER_TABS} from "../../constants";

@IonicPage({
  name: 'page-teachers-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-teachers-tabs',
  templateUrl: 'teachers-tabs.html',
})
export class TeachersTabsPage {

  teacherTabs =APP_TEACHER_TABS;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad TeachersTabsPage');
  }

}

import {TabInterface} from "../models/tabsModels";

export const APP_STUDENT_TABS : TabInterface[] = [
  {
    label: 'RUNNING',
    cache: false,
    icon: 'md-bicycle',
    component: 'page-exam-running'
  },
  {
    label: 'PENDING',
    cache: false,
    icon: 'md-albums',
    component: 'page-pending-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-completed-exam'
  }
];

export const APP_TEACHER_TABS : TabInterface[] = [
  {
    label: 'APPROVED',
    cache: false,
    icon: 'md-hand',
    component: 'page-approved-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-published-exam'
  }
];

export const APP_ADMIN_TABS : TabInterface[] = [
  {
    label: 'TM',
    cache: false,
    icon: 'md-man',
    component:'page-teacher-management'
  },

  {
    label: 'SM',
    cache: false,
    icon: 'md-people',
    component:'page-student-management'
  },

  {
    label: 'CM',
    cache: false,
    icon: 'md-calculator',
    component:'page-courses-management'
  }
];

  initializeTabs(){

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });
  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs').then(() => this.selectTabIndex(0));
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
      }else{
        this.nav.setRoot('page-students-tabs').then(() => this.selectTabIndex(0));
      }
    }
  }

  private selectTabIndex(index: number) {
      let tabs = this.nav.getActiveChildNavs();
      if(tabs && tabs[0]) {
          tabs[0].select(index);
      }
  }

adminTabs = APP_ADMIN_TABS;
@ViewChild('myTabs') tabRef: Tabs;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidEnter() {
    if (this.tabRef) {
        this.tabRef.select(0);
    }
}

app.html

<ion-title class="custom-font"
           style="font-size: 2.1em;" text-center>
  DASHBOARD
</ion-title>

<ion-buttons end>
  <button ion-button icon-only (click)="presentPopover($event)">
    <ion-icon name="md-more"></ion-icon>
  </button>
</ion-buttons>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of teacherTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs #myTabs tabsPlacement="top" tabsHighligh="true">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

管理选项卡.html

<ion-title class="custom-font"
           style="font-size: 2.1em;" text-center>
  DASHBOARD
</ion-title>

<ion-buttons end>
  <button ion-button icon-only (click)="presentPopover($event)">
    <ion-icon name="md-more"></ion-icon>
  </button>
</ion-buttons>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of teacherTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs #myTabs tabsPlacement="top" tabsHighligh="true">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

teachers tabs.html

<ion-title class="custom-font"
           style="font-size: 2.1em;" text-center>
  DASHBOARD
</ion-title>

<ion-buttons end>
  <button ion-button icon-only (click)="presentPopover($event)">
    <ion-icon name="md-more"></ion-icon>
  </button>
</ion-buttons>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of teacherTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs #myTabs tabsPlacement="top" tabsHighligh="true">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

---

这里第一次呈现teachers tabs.ts并显示selectedIndex元素，但当切换到admin tabs.ts时，显示最后呈现页面

我找到了解决办法。只需要更改以下文件

app.componets.ts

import {Component, ViewChild} from '@angular/core';
import {Nav, Platform, PopoverController} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {AuthProvider} from "../providers/auth";
import {SwitchAccountService} from "../providers/switch-account";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any;
  @ViewChild(Nav) nav: Nav;
  authentication:boolean=false;

  constructor(public platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeApp(statusBar, splashScreen);

  }

  initializeApp(statusBar: StatusBar,
                splashScreen: SplashScreen) {

    this.platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      this.auth.onSessionStore.subscribe(() => {

        if (this.auth.isAuthenticated == true) {
          this.authentication =true;
          this.initializeTabs();
        }else{
          this.authentication =false;
          this.nav.setRoot('login-page');
        }

      })

    })
  }

  initializeTabs(){

    setTimeout(() => {

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });

    }, 1000);

  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs');
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs');
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs');
      }else{
        this.nav.setRoot('page-students-tabs');
      }
    }



  }


  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create('page-popover');
    popover.present({
      ev: myEvent
    });
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_ADMIN_TABS} from "../../constants";

@IonicPage({
  name: 'page-admin-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-admin-tabs',
  templateUrl: 'admin-tabs.html',
})
export class AdminTabsPage {

  adminTabs =APP_ADMIN_TABS;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidEnter() {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AdminTabsPage');
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_TEACHER_TABS} from "../../constants";

@IonicPage({
  name: 'page-teachers-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-teachers-tabs',
  templateUrl: 'teachers-tabs.html',
})
export class TeachersTabsPage {

  teacherTabs =APP_TEACHER_TABS;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad TeachersTabsPage');
  }

}

import {TabInterface} from "../models/tabsModels";

export const APP_STUDENT_TABS : TabInterface[] = [
  {
    label: 'RUNNING',
    cache: false,
    icon: 'md-bicycle',
    component: 'page-exam-running'
  },
  {
    label: 'PENDING',
    cache: false,
    icon: 'md-albums',
    component: 'page-pending-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-completed-exam'
  }
];

export const APP_TEACHER_TABS : TabInterface[] = [
  {
    label: 'APPROVED',
    cache: false,
    icon: 'md-hand',
    component: 'page-approved-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-published-exam'
  }
];

export const APP_ADMIN_TABS : TabInterface[] = [
  {
    label: 'TM',
    cache: false,
    icon: 'md-man',
    component:'page-teacher-management'
  },

  {
    label: 'SM',
    cache: false,
    icon: 'md-people',
    component:'page-student-management'
  },

  {
    label: 'CM',
    cache: false,
    icon: 'md-calculator',
    component:'page-courses-management'
  }
];

  initializeTabs(){

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });
  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs').then(() => this.selectTabIndex(0));
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
      }else{
        this.nav.setRoot('page-students-tabs').then(() => this.selectTabIndex(0));
      }
    }
  }

  private selectTabIndex(index: number) {
      let tabs = this.nav.getActiveChildNavs();
      if(tabs && tabs[0]) {
          tabs[0].select(index);
      }
  }

adminTabs = APP_ADMIN_TABS;
@ViewChild('myTabs') tabRef: Tabs;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidEnter() {
    if (this.tabRef) {
        this.tabRef.select(0);
    }
}

与教师选项卡相同。ts

import {Component, ViewChild} from '@angular/core';
import {Nav, Platform, PopoverController} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {AuthProvider} from "../providers/auth";
import {SwitchAccountService} from "../providers/switch-account";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any;
  @ViewChild(Nav) nav: Nav;
  authentication:boolean=false;

  constructor(public platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeApp(statusBar, splashScreen);

  }

  initializeApp(statusBar: StatusBar,
                splashScreen: SplashScreen) {

    this.platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      this.auth.onSessionStore.subscribe(() => {

        if (this.auth.isAuthenticated == true) {
          this.authentication =true;
          this.initializeTabs();
        }else{
          this.authentication =false;
          this.nav.setRoot('login-page');
        }

      })

    })
  }

  initializeTabs(){

    setTimeout(() => {

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });

    }, 1000);

  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs');
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs');
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs');
      }else{
        this.nav.setRoot('page-students-tabs');
      }
    }



  }


  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create('page-popover');
    popover.present({
      ev: myEvent
    });
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_ADMIN_TABS} from "../../constants";

@IonicPage({
  name: 'page-admin-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-admin-tabs',
  templateUrl: 'admin-tabs.html',
})
export class AdminTabsPage {

  adminTabs =APP_ADMIN_TABS;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidEnter() {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AdminTabsPage');
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_TEACHER_TABS} from "../../constants";

@IonicPage({
  name: 'page-teachers-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-teachers-tabs',
  templateUrl: 'teachers-tabs.html',
})
export class TeachersTabsPage {

  teacherTabs =APP_TEACHER_TABS;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad TeachersTabsPage');
  }

}

import {TabInterface} from "../models/tabsModels";

export const APP_STUDENT_TABS : TabInterface[] = [
  {
    label: 'RUNNING',
    cache: false,
    icon: 'md-bicycle',
    component: 'page-exam-running'
  },
  {
    label: 'PENDING',
    cache: false,
    icon: 'md-albums',
    component: 'page-pending-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-completed-exam'
  }
];

export const APP_TEACHER_TABS : TabInterface[] = [
  {
    label: 'APPROVED',
    cache: false,
    icon: 'md-hand',
    component: 'page-approved-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-published-exam'
  }
];

export const APP_ADMIN_TABS : TabInterface[] = [
  {
    label: 'TM',
    cache: false,
    icon: 'md-man',
    component:'page-teacher-management'
  },

  {
    label: 'SM',
    cache: false,
    icon: 'md-people',
    component:'page-student-management'
  },

  {
    label: 'CM',
    cache: false,
    icon: 'md-calculator',
    component:'page-courses-management'
  }
];

  initializeTabs(){

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });
  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs').then(() => this.selectTabIndex(0));
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
      }else{
        this.nav.setRoot('page-students-tabs').then(() => this.selectTabIndex(0));
      }
    }
  }

  private selectTabIndex(index: number) {
      let tabs = this.nav.getActiveChildNavs();
      if(tabs && tabs[0]) {
          tabs[0].select(index);
      }
  }

adminTabs = APP_ADMIN_TABS;
@ViewChild('myTabs') tabRef: Tabs;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidEnter() {
    if (this.tabRef) {
        this.tabRef.select(0);
    }
}

管理选项卡.ts

import {Component, ViewChild} from '@angular/core';
import {Nav, Platform, PopoverController} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {AuthProvider} from "../providers/auth";
import {SwitchAccountService} from "../providers/switch-account";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage: any;
  @ViewChild(Nav) nav: Nav;
  authentication:boolean=false;

  constructor(public platform: Platform,
              statusBar: StatusBar,
              splashScreen: SplashScreen,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeApp(statusBar, splashScreen);

  }

  initializeApp(statusBar: StatusBar,
                splashScreen: SplashScreen) {

    this.platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      this.auth.onSessionStore.subscribe(() => {

        if (this.auth.isAuthenticated == true) {
          this.authentication =true;
          this.initializeTabs();
        }else{
          this.authentication =false;
          this.nav.setRoot('login-page');
        }

      })

    })
  }

  initializeTabs(){

    setTimeout(() => {

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });

    }, 1000);

  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs');
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs');
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs');
      }else{
        this.nav.setRoot('page-students-tabs');
      }
    }



  }


  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create('page-popover');
    popover.present({
      ev: myEvent
    });
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_ADMIN_TABS} from "../../constants";

@IonicPage({
  name: 'page-admin-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-admin-tabs',
  templateUrl: 'admin-tabs.html',
})
export class AdminTabsPage {

  adminTabs =APP_ADMIN_TABS;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }


  ionViewDidEnter() {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AdminTabsPage');
  }

}

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams} from 'ionic-angular';
import {APP_TEACHER_TABS} from "../../constants";

@IonicPage({
  name: 'page-teachers-tabs',
  priority: 'high'
})

@Component({
  selector: 'page-teachers-tabs',
  templateUrl: 'teachers-tabs.html',
})
export class TeachersTabsPage {

  teacherTabs =APP_TEACHER_TABS;

  constructor(public navCtrl: NavController,
              public navParams: NavParams) {
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad TeachersTabsPage');
  }

}

import {TabInterface} from "../models/tabsModels";

export const APP_STUDENT_TABS : TabInterface[] = [
  {
    label: 'RUNNING',
    cache: false,
    icon: 'md-bicycle',
    component: 'page-exam-running'
  },
  {
    label: 'PENDING',
    cache: false,
    icon: 'md-albums',
    component: 'page-pending-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-completed-exam'
  }
];

export const APP_TEACHER_TABS : TabInterface[] = [
  {
    label: 'APPROVED',
    cache: false,
    icon: 'md-hand',
    component: 'page-approved-exam'
  },
  {
    label: 'COMPLETED',
    cache: false,
    icon: 'md-checkmark-circle-outline',
    component: 'page-published-exam'
  }
];

export const APP_ADMIN_TABS : TabInterface[] = [
  {
    label: 'TM',
    cache: false,
    icon: 'md-man',
    component:'page-teacher-management'
  },

  {
    label: 'SM',
    cache: false,
    icon: 'md-people',
    component:'page-student-management'
  },

  {
    label: 'CM',
    cache: false,
    icon: 'md-calculator',
    component:'page-courses-management'
  }
];

  initializeTabs(){

      this.switchAccountService
        .getUserLabel()
        .subscribe(message =>{
          this.refreshTabs(message);
        });
  }

  refreshTabs(item){

    if( item == 'ADMIN'){
      this.nav.setRoot('page-admin-tabs').then(() => this.selectTabIndex(0));
    } else if(item == 'TEACHER'){
      this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
    } else{
      if(this.auth.currentUser.user_flag == 2){
        this.nav.setRoot('page-teachers-tabs').then(() => this.selectTabIndex(0));
      }else{
        this.nav.setRoot('page-students-tabs').then(() => this.selectTabIndex(0));
      }
    }
  }

  private selectTabIndex(index: number) {
      let tabs = this.nav.getActiveChildNavs();
      if(tabs && tabs[0]) {
          tabs[0].select(index);
      }
  }

adminTabs = APP_ADMIN_TABS;
@ViewChild('myTabs') tabRef: Tabs;

constructor(public navCtrl: NavController, public navParams: NavParams) {
}

ionViewDidEnter() {
    if (this.tabRef) {
        this.tabRef.select(0);
    }
}

管理选项卡.html

<ion-title class="custom-font"
           style="font-size: 2.1em;" text-center>
  DASHBOARD
</ion-title>

<ion-buttons end>
  <button ion-button icon-only (click)="presentPopover($event)">
    <ion-icon name="md-more"></ion-icon>
  </button>
</ion-buttons>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of teacherTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs #myTabs tabsPlacement="top" tabsHighligh="true">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

---

与教师选项卡相同。html

什么是等效的应用程序管理选项卡和应用程序教师选项卡？这些是选项卡的对象数组@Gurbelawrite此数组是对象的预定义数组。。像{label:'TM'，cache:false，icon:'md-man'，component:'page-teacher-management'}问题出在组件名上，它是否导入到选项卡页上？

<ion-title class="custom-font"
           style="font-size: 2.1em;" text-center>
  DASHBOARD
</ion-title>

<ion-buttons end>
  <button ion-button icon-only (click)="presentPopover($event)">
    <ion-icon name="md-more"></ion-icon>
  </button>
</ion-buttons>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs tabsPlacement="top" tabsHighligh="true" selectedIndex="0">

  <ion-tab *ngFor="let tab of teacherTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>

<ion-tabs #myTabs tabsPlacement="top" tabsHighligh="true">

  <ion-tab *ngFor="let tab of adminTabs"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component">
  </ion-tab>

</ion-tabs>