динамическое отображение вкладок в ionic3 и angular 5

Question

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

корневых вкладок.ts

import {Component} from '@angular/core';
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
import {TabInterface} from "../../models/tabsModels";
import {AuthProvider} from "../../providers/auth";
import {APP_ADMIN_TABS, APP_STUDENT_TABS, APP_TEACHER_TABS} from "../../constants";
import {SwitchAccountService} from "../../providers/switch-account";

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

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

  tabs =[];
  userLabel: any;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              private auth:AuthProvider,
              public popoverCtrl: PopoverController,
              private switchAccountService: SwitchAccountService) {

    this.initializeTabs();

  }

  initializeTabs(){

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

  refreshTabs(item){

      if( item == 'ADMIN'){
        while(this.tabs.length){
          this.tabs.pop();
        }

        APP_ADMIN_TABS.forEach(el => {
          this.tabs.push(<TabInterface>{label: el.label, icon: el.icon, component: el.component});
        });

        // this.tabs.splice(this.tabs.indexOf(0), 1);
        // setTimeout(()=>{
        //   APP_ADMIN_TABS.forEach(el => {
        //     this.tabs.push(<TabInterface>{label: el.label, icon: el.icon, component: el.component});
        //   });
        // },4000);


        //this.tabs.splice(0,1);
      }

      else if(item == 'TEACHER'){

        APP_TEACHER_TABS.forEach(el => {
          this.tabs.push(<TabInterface>{label: el.label, icon: el.icon, component: el.component});
        });

      }

      else{

        if(this.auth.currentUser.user_flag == 2){

          APP_TEACHER_TABS.forEach(el => {
            this.tabs.push(<TabInterface>{label: el.label, icon: el.icon, component: el.component});
          });

        }else{

          APP_STUDENT_TABS.forEach(el => {
            this.tabs.push(<TabInterface>{label: el.label, icon: el.icon, component: el.component});
          });

        }
      }

  }

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

root-tabs.html

<ion-header>
  <ion-navbar no-border-bottom color="customColor">

    <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-navbar>
</ion-header>

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

Answer 1

Я не полностью знаю, как настроена ваша система, но Я собрал стек , который показывает, как динамически изменять вкладки при изменении пользователя.

КакВы обнаружили, что Ionic на самом деле не работает правильно, если вы измените фактические вкладки, которые отображаются в нем.Что вы можете сделать, это динамически показать / скрыть их, используя свойство [show].

<ion-tabs #ionTabs>
  <ion-tab *ngFor="let tab of tabs$ | async; trackBy: trackByFn"
           [tabIcon]="tab.icon"
           [tabTitle]="tab.label"
           [root]="tab.component"
           [show]="tab.show">
  </ion-tab>
</ion-tabs>

Я собрал все вкладки в массив и дал список ролей, которые имеют доступ к каждой из них.

export const TABS: TabInterface[] = [
  { label: 'Home', icon: 'home', component: HomePage, roles: [UserRole.Admin], show: false },
  { label: 'About', icon: 'information-circle', component: AboutPage, roles: [UserRole.Admin, UserRole.Teacher], show: false },
  { label: 'Contact', icon: 'contacts', component: ContactPage, roles: [UserRole.Teacher, UserRole.Student], show: false }
];

Затем, когда пользователь изменился, я обработал вкладки, чтобы определить, к какому пользователю он имел доступ, исходя из ролей, которые у него были:

tabs$ = this.userService.user$
    .takeUntil(this.destroy$.asObservable())
    .map(user => this.processTabsForUser(user))
    .do(tabs => this.selectCorrectTab(tabs));

...

private processTabsForUser(user: User): TabInterface[] {
    return TABS.map(tab => {
        return Object.assign({}, tab, { show: user && user.isAuthorized(tab.roles)});
    });
}

Для правильной работы, еслиПользователь изменился, когда вошел другой (что не должно происходить в реальной системе, я бы не подумал, но ...) Мне пришлось обработать текущую выбранную вкладку и убедиться, что пользователь имеет к ней доступ.Если нет, я бы выбрал первую вкладку, к которой у пользователя был доступ:

private selectCorrectTab(tabs: TabInterface[]) {
    const selectedTab = this.ionTabs.getSelected();
    const tab = tabs.find(t => selectedTab && t.component === selectedTab.root);

    if (!tab || !tab.show) {
        const index = tabs.findIndex(t => t.show);

        if (!!~index) {
            // bug in Ionic causes the need to do in setTimeout if user changes when already logged in
            setTimeout(() => this.ionTabs.select(index));
        }
    }
}

Это должно привести к конечному результату динамического изменения вкладок в зависимости от пользователя, вошедшего в систему.