在 Ionic 2 中动态更改选项卡 [英] Changing tabs dynamically in Ionic 2

问题描述

我正在创建一个使用选项卡的 Ionic 应用程序.我希望能够使用附加到选项卡模板的打字稿组件类从一个选项卡导航到另一个选项卡.例如，Tab 2 应该在触发 tab 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}" 并且我可以访问 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屋！