如何有條件地隱藏和顯示標籤 - 離子2？

Question

這種情況如下：我有一個帶有幾個離子選項卡元素的ion-tabs容器，以及登錄到我的應用程序的不同用戶。我需要做的是根據記錄的用戶類型顯示或隱藏ion-tab元素。

問題是我需要動態地這樣做，如果我使用像[show]="variable"這樣的指令，它不起作用。

tabs.ts

import { Component } from '@angular/core'; 

import { Page1 } from '../page1/page1'; 
import { Page2 } from '../page2/page2'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 
    // this tells the tabs component which Pages 
    // should be each tab's root Page 
    tab1Root: any; 
    tab2Root: any; 
    tab3Root: any; 
    tab4Root: any; 
    tab5Root: any; 
    variable: any; 

    constructor(public userData: UserData) { 
    // get variable from local storage 
    this.userData.getUser().then((value) => { 
     if(value.typeLabel == 'Expert') { 
     this.variable = true; 
     console.log('1->',value.typeLabel); 
     }else if(value.typeLabel == 'Client'){ 
     this.variable = false; 
     console.log('2->',value.typeLabel); 
     } 
    }); 

    this.tab1Root = this.variable?Page1:Page2; <-- i want to show specify tabs depending on variable value 
    this.tab2Root = NotificationsPage; 
    this.tab3Root = MessagesPage; 
    this.tab4Root = InstructionsPage; 
    this.tab5Root = ExpertsPage; 
    } 
} 

tabs.html

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="tab_title" tabIcon="notifications"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab4Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab5Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
</ion-tabs> 

但始終this.tab1Root回報Page1;

我在做什麼錯？有人能幫助我嗎？

Answer 1

嘗試使用*ngIf

<ion-tabs *ngIf = "variable"> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="tab_title" tabIcon="notifications"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab4Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
    <ion-tab [root]="tab5Root" tabTitle="tab_title" tabIcon="home"></ion-tab> 
</ion-tabs> 

您的.ts文件裏面

使變量variable = true顯示選項卡使它false不顯示選項卡。

Answer 2

而不是設置一個變量值到tab1Root設置它是一個函數，以便它在每次達到變量時執行。

this.tab1Root =() => this.variable?Page1:Page2; 

Answer 3

在你的組件中創建一個tabs數組，並使用它來動態加載你的模板。然後，您可以輕鬆地操縱在組件選項卡陣列：

tabs.ts

import { Page1 } from '../page1/page1'; 
import { Page2 } from '../page2/page2'; 

@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    tabs: any[] = [ 
    { title: "Home", root: Page2, icon: "home" }, 
    { title: "tab_title", root: NotificationsPage, icon: "notifications" }, 
    { title: "tab_title", root: MessagesPage, icon: "home" }, 
    { title: "tab_title", root: InstructionsPage, icon: "home" }, 
    { title: "tab_title", root: ExpertsPage, icon: "home" } 
    ]; 

    constructor(public userData: UserData) { 
    // get variable from local storage 
    this.userData.getUser().then((value) => { 
     if(value.typeLabel == 'Expert') { 
     this.tabs[0].root = Page1; 
     console.log('1->',value.typeLabel); 
     } else if(value.typeLabel == 'Client'){ 
     this.tabs[0].root = Page2; 
     console.log('2->',value.typeLabel); 
     } 
    }); 
    } 
} 

tabs.html

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

Answer 4

正如我在論壇離子回答： 它只是不會工作。這就是Ionic如何構建的，它目前不允許動態設置標籤根頁面。我不得不繞了幾個小時，最終以如下方式工作： 1）獲取標籤組件的引用以及您想要動態設置的標籤的引用。不要爲此動態選項卡設置[root]屬性，因爲Ionic將運行一種方法，以後不會允許您更新此選項卡的根頁面。

<ion-tabs #appTabs> 
    <ion-tab #tabA tabTitle="Tab A" tabIcon="list-box"></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Tab B" tabIcon="albums"></ion-tab> 
    <ion-tab [root]="tab3Root" tabTitle="Tab C" tabIcon="pulse"></ion-tab> 
    <ion-tab [root]="tab4Root" tabTitle="Tab D" tabIcon="more"></ion-tab> 
</ion-tabs> 

2）在TabsPage文件：

import { Component, ViewChild } from '@angular/core'; 
import { Store } from '@ngrx/store'; // I'm using ngrx 
import { Tabs, Tab } from 'ionic-angular'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/operator/filter'; 
import 'rxjs/operator/map'; 

import { TabA1Page } from '...'; 
import { TabA2Page } from '...'; 
import { TabBPage } from '...'; 
import { TabCPage } from '...'; 
import { TabDPage } from '...'; 
import { AppState } from '../../app.reducer'; 
import { DashboardCard } from '...'; 

@Component({ 
    templateUrl: 'tabs.page.html', 
    selector: 'page-tabs' 
}) 
export class TabsPage { 
    public tab1Root: any; // As you can see, it's not set yet. 
    public tab2Root: any = TabBPage; 
    public tab3Root: any = TabCPage; 
    public tab4Root: any = TabDPage; 

    // Get the references 
    @ViewChild('appTabs') private tabsRef: Tabs; 
    @ViewChild('tabA') private tabRef: Tab; 

    constructor(private store: Store<AppState>) {} 

    public ionViewDidEnter() { 
    // These three sources can change the root page for the tab A: 
    const defaultDashboard$ = this.store.select('task', 'fetchDashboardCards', 'value'); 
    const dashboardByProject$ = this.store.select('task', 'fetchDashboardCardsByProject', 'value'); 
    const dashboardByDueDate$ = this.store.select('task', 'fetchDashboardCardsByDueDate', 'value'); 

    Observable 
     .merge(defaultDashboard$, dashboardByProject$, dashboardByDueDate$) 
     .filter(v => v != null) 
     .map((dashboard: DashboardCard[]) => dashboard[0].layout === 'project' ? TabA1 : TabA2) 
     .distinctUntilChanged() 
     .subscribe(this.setTabARootPage.bind(this)); 
    } 

    private setTabARootPage(rootPage) { 
    // This is the hack 

    // set the root property that we didn't set in the view as [root]="..." 
    this.tabRef.root = rootPage; 

    /* 
    * Modifying private attributes to make it work. 
    * This will allow Ionic to run the "tabsInstance.load()" method to load a new root page 
    * It also allows us to select the same tab again. 
    */ 
    this.tabRef._loaded = false; 
    this.tabsRef._tabs[0].isSelected = false; 

    this.tabsRef.select(this.tabRef); // select the tab again 
    } 

}