Typescript 如何有条件地隐藏和显示选项卡-Ionic 2?
情况如下:我有一个Typescript 如何有条件地隐藏和显示选项卡-Ionic 2?,typescript,tabs,local-storage,ionic2,Typescript,Tabs,Local Storage,Ionic2,情况如下:我有一个iontabs容器,其中包含多个iontab元素,以及登录到我的应用程序的不同用户。我需要做的是根据记录的用户类型显示或隐藏ion选项卡元素 问题是我需要动态地执行此操作,如果我使用像[show]=“variable”这样的指令,它将无法工作 选项卡.ts import { Component } from '@angular/core'; import { Page1 } from '../page1/page1'; import { Page2 } from '../pa
iontabs
容器,其中包含多个iontab元素,以及登录到我的应用程序的不同用户。我需要做的是根据记录的用户类型显示或隐藏ion选项卡
元素
问题是我需要动态地执行此操作,如果我使用像[show]=“variable”
这样的指令,它将无法工作
选项卡.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;
}
}
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);
}
});
}
}
从'@angular/core'导入{Component};
从“../Page1/Page1”导入{Page1}”;
从“../Page2/Page2”导入{Page2};
@组成部分({
templateUrl:'tabs.html'
})
导出类选项卡{
//这将告诉选项卡组件哪些页面
//应该是每个选项卡的根页面
表1根:任何;
tab2Root:任何;
tab3根:任何;
tab4Root:任何;
tab5Root:任何;
变量:任意;
构造函数(公共用户数据:用户数据){
//从本地存储获取变量
this.userData.getUser()。然后((值)=>{
如果(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;不是为tab1Root设置变量值,而是将其设置为函数,以便每次到达变量时都执行它
this.tab1Root = () => this.variable?Page1:Page2;
尝试使用*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文件中
使variablevariable=true
显示选项卡使其false
不显示选项卡。在组件中创建选项卡数组,并使用该数组动态加载模板。然后,您可以轻松地在组件中操作选项卡数组:
选项卡.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;
}
}
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 [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>
<ion-tabs>
<ion-tab *ngFor="let tab of tabs" [root]="tab.root" [tabTitle]="tab.title" [tabIcon]="tab.icon"></ion-tab>
</ion-tabs>
正如我在爱奥尼亚论坛上回答的那样:
它就是不起作用的。这就是爱奥尼亚的构建方式,它目前不允许动态设置选项卡根页面。我不得不花了几个小时的时间,最终通过以下方式使它起作用:
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) 在选项卡页文件中:
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
}
}
从'@angular/core'导入{Component,ViewChild};
从'@ngrx/Store'导入{Store};//我正在使用ngrx
从“离子角度”导入{Tabs,Tab};
从“rxjs/Observable”导入{Observable};
导入“rxjs/操作员/过滤器”;
导入“rxjs/operator/map”;
从“…”导入{TabA1Page};
从“…”导入{TabA2Page};
从“…”导入{TabBPage};
从“…”导入{TabCPage};
从“…”导入{TabDPage};
从“../../app.reducer”导入{AppState};
从“…”导入{DashboardCard};
@组成部分({
templateUrl:'tabs.page.html',
选择器:“页面选项卡”
})
导出类选项卡{
public tab1Root:any;//如您所见,它还没有设置。
公共tab2Root:any=TabBPage;
公共tab3Root:any=TabCPage;
公共tab4Root:any=TabDPage;
//获取参考资料
@ViewChild(“appTabs”)专用选项卡ref:Tabs;
@ViewChild('tabA')私有tabRef:Tab;
构造函数(私有存储:存储){}
公共IonViewDiCenter(){
//这三个源可以更改选项卡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');
可观察
.merge(defaultDashboard$、dashboardByProject$、dashboardByDueDate$)
.filter(v=>v!=null)
.map((仪表板:仪表板卡片[])=>dashboard[0]。布局===“项目”?选项卡A1:TabA2)
.distinctUntilChanged()
.subscribe(this.setTabARootPage.bind(this));
}
私有setTabARootPage(根页面){
//这是黑客
//将视图中未设置的root属性设置为[root]=“…”
this.tabRef.root=rootPage;
/*
*修改私有属性以使其工作。
*这将允许Ionic运行“tabsInstance.load()”方法来加载新的根页面
*它还允许我们再次选择相同的选项卡。
*/
this.tabRef.\u loaded=false;
this.tabsRef.\u tabs[0].isSelected=false;
this.tabsRef.select(this.tabRef);//再次选择选项卡
}
}
如今:
IonicModule.forRoot(MyApp, {
tabsHideOnSubPages: true
})
你做到了吗?哪个答案对你有帮助?我也处于同样的情况。@VivekSinha,make variable=true以显示选项卡,make false以不显示选项卡。如下所示Mohan Gopi
response。这是有效的,但当动态更改为true时,会将选项卡添加到选项卡的末尾,而不是其正确的位置。。。