小编ola*_*ola的帖子

在Ionic 2中动态更改标签

我正在创建一个Ionic应用程序,我正在使用制表符.我希望能够使用附加到选项卡模板的typescript组件类从一个选项卡导航到另一个选项卡.例如,应在选项卡1中触发事件时激活选项卡2.

我的选项卡在选项卡中加载良好,只要我手动单击选项卡移动,所有内容都很好,但尝试在后面的代码中切换上下文非常棘手.

在加载时,我可以通过简单地将ion-tabs的[selectedIndex]属性设置为我的tabs组件类中的属性值,使任何一个选项卡处于活动状态.

选项卡父模板 - 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>
Run Code Online (Sandbox Code Playgroud)

组件 - 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;
 } …
Run Code Online (Sandbox Code Playgroud)

ionic2

19
推荐指数
5
解决办法
3万
查看次数

标签 统计

ionic2 ×1