时间戳

首页 > 解决方案 > 选项卡根元素不可见

angular - 选项卡根元素不可见

问题描述

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

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

}

应用程序.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

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

}

管理员-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>

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

这里第一次渲染教师-tabs.ts并显示 selectedIndex 元素，但是当切换到admin-tabs.ts时，它显示最后一个渲染页面。

标签： angularionic2ionic3

解决方案

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

应用程序组件.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);
      }
  }

与教师-tabs.ts 相同

管理员-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);
    }
}

管理员-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>

与教师-tab.html 相同

推荐阅读