Вкладки Корневые элементы не видны - PullRequest
Новая
       4

Вкладки Корневые элементы не видны

0 голосов
/ 26 апреля 2018

Я создаю ионные приложения, в которых есть опция переключения нескольких аккаунтов. Моя проблема в первый раз, когда его страница корневых элементов вкладок видна хорошо, но когда она переключается на другую учетную запись с конкретными вкладками, то она видна перед страницей рендеринга. Я покажу свой код для вашего лучшего понимания.

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

админа 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'
  }
];

Здесь первый раз визуализируйте teacher-tabs.ts и покажите элемент selectedIndex, но при переключении на admin-tabs.ts отобразите последнюю страницу рендеринга.

1 Ответ

0 голосов
/ 29 апреля 2018

Я получил свое решение. Просто нужно изменить следующие файлы

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

То же, что teacher-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

...