Tabs Root elements not visible

问题

I'm building ionic apps its has multi-account switch option. My problem is first time its Tabs root elements page visible good but when its switch to another account with specific tabs then its visible before render page. I will show my code for your better understand.

app.components.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
    });
  }

}

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>

And two tabs one is TeachersTabsPage and another tabs is AdminTabsPage

admin-tabs.ts

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

}

admin-tabs.html

<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>

teachers-tabs.ts

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

}

teachers-tabs.html

<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>

And tabs.ts

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'
  }
];

Here first time render teachers-tabs.ts and show selectedIndex element but when switch to admin-tabs.ts its show last rendering page.

回答1:

I got my solution. Just need to change following files

app.componets.ts

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

Same as teachers-tabs.ts

admin-tabs.ts

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

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

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

admin-tabs.html

<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>

same as teachers-tab.html

来源：https://stackoverflow.com/questions/50041100/tabs-root-elements-not-visible