在Ionic 2中动态更改标签 [英] Changing tabs dynamically in Ionic 2
问题描述
我正在创建一个Ionic应用程序,我正在使用制表符。我希望能够使用附加到选项卡模板的typescript组件类从一个选项卡导航到另一个选项卡。例如,Tab 2应该在触发选项卡1中的事件时激活。
I am creating an Ionic application where I am using tabs. I want to be able to navigate from one tab to the other using the typescript component class attached to the tab template. For example, Tab 2 should be activated upon triggering an event in tab 1.
我的选项卡在选项卡中加载良好,只要我手动点击选项卡可以移动,但是尝试在后面的代码中切换上下文非常棘手。
My tab loads well in the tabs and all is well as long as I manually click on the tab to move around, but trying to switch context in the code behind as been very tricky.
在加载时,我可以通过简单地使任何一个选项卡处于活动状态将ion-tabs的[selectedIndex]属性设置为我的选项卡组件类中的属性值。
At load time I am able to make any one of the tabs active by simply setting the [selectedIndex] attribute of the ion-tabs to the value of an attribute in my tabs component class.
选项卡父模板 - tab.html
<ion-tabs #tabParent [selectedIndex]="tabToShow">
<ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
<ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
<ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>
组件 - tab.ts
import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';
@Page({
templateUrl : 'build/pages/tab/tab.html'
})
export class Tab{
tab1: any;
tab2: any;
tab3: any;
tabToShow : number = 1;
ngOnInit(){
this.tab1 = Tab1;
this.tab2 = Tab2;
this.tab3 = Tab3;
}
}
在第一个标签的组件中( Tab1
),我可以使用 [rootParams] ={parent:tabParent}$获取对父标签的引用c $ c>我可以访问tabs对象公开的所有可用属性。在tab1.html模板上生成的事件会导致调用
goToTab2()
。所以,我能够将 SelectedIndex
设置为1(我希望将活动选项卡更改为第二个选项卡)。但是标签没有变化。
In the component for the first tab (Tab1
), i am able to get a reference to the parent tabs by using [rootParams] = "{parent : tabParent}"
and I am able access all available properties exposed by the tabs object. An event generated on the tab1.html template, causes the goToTab2()
to be called. So, I was able to set SelectedIndex
to 1 (which I expect to change the active tab to the second tab). But the tab is not changing.
tab1.ts
import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'
@Page({
templateUrl : 'build/pages/tab/tab1/tab1.html'
})
export class Tab1{
parent : any;
constructor(nav : NavParams){
this.parent = nav.data;
}
goToTab2(event, value): void{
this.parent.parent.selectedIndex = 1;
console.log(this.parent.parent);
}
}
我需要帮助,我是什么做错了吗?
I need help, what am I doing wrong?
推荐答案
我遇到了同样的问题,经过几个小时的尝试和调试后,结果很简单:
I had the same problem and after hours of trying and debugging, it turned out to be so simple:
import {Page, NavController, Tabs} from 'ionic-angular';
@Page({
templateUrl : 'build/pages/tab/tab1/tab1.html'
})
export class Tab1{
constructor(private nav: NavController) {
};
selectTab(index: number) {
var t: Tabs = this.nav.parent;
t.select(index);
}
}
}
这篇关于在Ionic 2中动态更改标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!