在Ionic 2中动态更改标签

问题描述 投票：18回答：9

我正在创建一个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>

组件 - 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（我希望将活动选项卡更改为第二个选项卡）。但标签没有变化。

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

}

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

ionic2
9个回答
30
投票

我有同样的问题，经过几个小时的尝试和调试，结果很简单：

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);
    }
}
11
投票
this.nav.parent.select(tabIndex);

tabIndex从0开始

5
投票

我想从侧面菜单导航到选项卡页面。为了实现这一点，我做了以下事情：

这是BS。 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>

Tabs.ts

...normal stuff preceding ...
export class TabsPage {
 @ViewChild('page-tabs') tabRef: Tabs;
 activeTab: any;
 tab1Root: any = HomePage;
 tab2Root: any = ProfilesPage;

 constructor(public navCtrl: NavController, public params: NavParams) {
    this.authUser = params.get("authUser");
    this.activeTab = params.get("tab")?params.get("tab"):0;
 }

}

然后我只是从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);
   }
}

}

然后在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>

你有它...

5
投票

对于Ionic 3+，您无权访问this.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>
3
投票

现在更容易！您可以将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>
1
投票
export class Page1 {
  tab:Tabs;

  // create a class variable to store the reference of the tabs

  constructor(public navCtrl: NavController, private nav: Nav) {
    this.tab = this.navCtrl.parent;

    /*Since Tabs are declarative component of the NavController 
      - it is accessible from within a child component. 
      this.tab - actually stores an array of all the tabs defined 
      in the tab.html / tab component.
   */
  }

  goToTab2 (){  
    this.tab.select(1);

  //  the above line is self explanatory. We are just calling the select() method of the tab
  }
  goToTab3 (){
    this.tab.select(2);
  }
}
0
投票

在tab1组件（tab1.ts）中，尝试注入父组件Tab：

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

您可以使用@ViewChild或IonicApp.getComponent()获取制表符元素。可以通过标签元素访问标签按钮。使用onClick将制表符按钮单击事件绑定到@HostListener函数。您可以通过调用onClick按钮上的选项卡按钮来切换选项卡。

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();
    });
  }
}
0
投票

它只是简单地使用NavController类及其属性.parent.select（您想要的选项卡的位置）

constructor(public navCtrl: NavController) {
}
goToTab2(){
    this.navCtrl.parent.select(1);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.