Ionic2 在Ionic 2中动态更改选项卡

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

我的选项卡在选项卡中加载得很好，只要我手动单击选项卡四处移动，一切都很好，但是尝试在代码中切换上下文是非常棘手的

在加载时，我只需将离子选项卡的[selectedIndex]属性设置为我的选项卡组件类中的属性值，就可以激活任何一个选项卡

选项卡父模板-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>

在第一个选项卡（

Tab1

）的组件中，我可以通过使用

[rootParams]=“{parent:tabParent}”

获得对父选项卡的引用，并且我可以访问选项卡对象公开的所有可用属性。在tab1.html模板上生成的事件导致调用

goToTab2（）

。因此，我能够将

SelectedIndex

设置为1（我希望将活动选项卡更改为第二个选项卡）。但是账单没有改变

表1.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;
 }

}

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);
 }

}

我需要帮助，我做错了什么？

在您的tab1组件（tab1.ts）中，尝试插入父组件选项卡：

export class Tab1{
  constructor(@Host() _parent:Tab) {}
  goToTab2(event, value): void{
    this._parent.tabToShow = 1 ;
  }
}

---

我也遇到了同样的问题，经过数小时的尝试和调试，问题变得非常简单：

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);
    }
}

---

您可以使用

@ViewChild

或

IonicApp.getComponent（）

获取tabs元素。 通过tabs元素可以访问tab按钮。 选项卡按钮单击事件通过使用

@HostListener

绑定到

onClick

函数。 您可以通过调用tab按钮onClick按钮来切换tab

export class TabsPage {
  tab1TabRoot: Type = Tab1Page;
  tab2TabRoot: Type = Tab2Page;
  tab3TabRoot: Type = Tab3Page
  @ViewChild(Tabs) tabs;

  constructor(
    private _ngZone: NgZone,
    private _platform: Platform,
    private _app: IonicApp,
  ) {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.tabs);
  }

  public selectTab2() {
    this._ngZone.run(function() {
      tabs._btns._results[0].onClick();
    });
  }
}

---

现在更容易了！您可以将selectedIndex属性添加到

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab1Root"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

---

tabIndex从0开始

我想从侧菜单导航到选项卡式页面。为此，我做了以下工作：

Tabs.html：

<ion-tabs selectedIndex="{{activeTab}}">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Profiles" tabIcon="filing">     </ion-tab>
</ion-tabs>

}

然后我刚刚从app.component.ts传递了tab参数

...normal stuff preceding ...
export class MyApp {
 @ViewChild(Nav) nav: Nav;
 isAppInitialized: boolean = false;
 rootPage: any
 pages: Array<{title: string, type: string, index?: number, component?: any}>;

  constructor(
   private platform: Platform,
   public menu: MenuController) {

 }

 ngOnInit() {
    this.platform.ready().then(() => {
     this.pages = [
       {title: 'Home', type: 'tab', index: 0},
       {title: 'Profiles', type: 'tab', index:1},
       {title: 'Create Shares', type: 'page', component: HomePage},
       {title: 'Existing Shares',type: 'page', component: ProfilesPage}
     ];
    });
  }

 openPage(page) {
   this.menu.close();

   if (page.type==='tab') {
     this.nav.setRoot(TabsPage,{tab: page.index});
   } else {
     this.nav.setRoot(page.componenet);
   }
}

…前面的正常内容。。。
导出类MyApp{
@ViewChild（导航）导航：导航；
isAppInitialized:boolean=false；
根页面：任何
页面：数组；
建造师(
私有平台：平台，
公共菜单：菜单控制器）{
}
恩戈尼尼特（）{
this.platform.ready（）。然后（（）=>{
此页=[
{title:'Home'，type:'tab'，index:0}，
{标题：'Profiles'，类型：'tab'，索引：1}，
{标题：“创建共享”，类型：“页面”，组件：主页}，
{title:'existingshares'，type:'page'，component:ProfilesPage}
];
});
}
openPage（第页）{
这个.menu.close（）；
if（page.type==='tab'）{
this.nav.setRoot（TabsPage，{tab:page.index}）；
}否则{
this.nav.setRoot（page.componenet）；
}
}

}

然后在app.html中

 <ion-header>
    <ion-toolbar>
      <ion-title>Left Menu</ion-title>
        <button class="absolute-right" ion-button clear menuClose="left">
          <span ion-text showWhen="ios">Close</span>
          <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

左菜单
接近
{{p.title}}

---

您已经有了它…

对于Ionic 3+，您没有访问此.nav的权限，因此您可以使用以下功能：

go(tabIndex: number)
{
    this.app.getActiveNavs()[0].parent.select(tabIndex);
}

如果函数是在公共类中定义的（在所有页面中导入），则可以在任何地方调用它：

<button ion-button (click)="core.go(0);">Go to first tab (#0)</button>
<button ion-button (click)="core.go(1);">Go to second tab (#1)</button>

转到第一个选项卡（#0）
转到第二个选项卡（#1）

它很简单，只需使用NavController类及其属性.parent.select（所需选项卡的位置）

---

我已经试过了，没用。我明白了为什么它不起作用。如果我插入父选项卡，一个新实例将被发送到我的选项卡组件，而不是当前承载子选项卡的组件。使用

@Inject（forwardRef（（）=>Tab））选项卡：选项卡

？是否有方法清除历史记录..使用select导航后按“上一步”按钮可将我带到上一个选项卡。我不想要这个怎么用？请粘贴完整的解决方案。我们可以清除历史记录并使用select导航吗。如果要删除选项卡的所有子导航：+this.app.getRootNav（）.getActiveChildNav（）.getSelected（）.poptRoot（），我不想返回到显示select的选项卡

 <ion-header>
    <ion-toolbar>
      <ion-title>Left Menu</ion-title>
        <button class="absolute-right" ion-button clear menuClose="left">
          <span ion-text showWhen="ios">Close</span>
          <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

go(tabIndex: number)
{
    this.app.getActiveNavs()[0].parent.select(tabIndex);
}

<button ion-button (click)="core.go(0);">Go to first tab (#0)</button>
<button ion-button (click)="core.go(1);">Go to second tab (#1)</button>

constructor(public navCtrl: NavController) {
}
goToTab2(){
    this.navCtrl.parent.select(1);
}