标签根元素不可见

Question

我正在构建离子应用程序，其具有多门开关选项。我的问题是它的第一次标签根元素页面可见，但是当它切换到带有特定选项卡的另一个帐户时，然后在渲染页面之前可见。我将显示我的代码，以使您更好地理解。

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>

和两个选项卡一个是TeachersTabsPage，另一个选项卡是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>

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

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

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

这里第一次渲染 thocters-tabs.ts 并显示SelectionIndex元素，但是当切换到 admin-tabs.tss.ts 其显示最后一个渲染页面时。

Answer 1

我得到了解决方案。只需要更改以下文件

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

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

与thocters-tab.html