如何在 ionic 2 中 select 标签？

Question

我正在努力在 Ionic2 中创建一个同时使用侧边菜单和选项卡导航的基本应用程序。我了解导航堆栈的概念，每个选项卡都有自己的导航堆栈，但我无法掌握对选项卡本身的控制。

选项卡起始模板初始化一个项目，其中一个 ion-nav 的根页面指向 "rootPage"，@App 的属性指向 TabsPage class.

<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

TabsPage class 定义了 3 个属性，每个页面一个，指向它们各自的 classes（每个 class 用 @Page 装饰）。但是 TabsPage class 本身似乎没有任何功能，或者没有注入选项卡控制器，我发现几乎没有关于如何获取 uire 一个 Tabs 实例的文档（ http://ionicframework.com/docs/v2/api/components/tabs/Tabs/)

上引用了实例方法

我设法做到的： 使用一个选项卡控制另一个选项卡。

import {Page, Tabs} from 'ionic-angular';

@Page({
    templateUrl: 'build/pages/timeline/timeline.html'
})
export class Timeline {
    tabs:Tabs;
    constructor(tabs:Tabs) {
        this.tabs=tabs;
        this.selectTab(2);
    }
    selectTab(i:number) {
        this.tabs.select(i);
    }
}

上面的页面注入了一个Tabs实例，它继承自NavController。 Tabs 实例具有所需的 select 方法，我可以指向不同的选项卡（按索引，而不是按名称）。所以在这种情况下，选择我的 'timeline' 选项卡将触发构造函数，而不是转到时间线选项卡，我们最终选择了第二个选项卡。

我想做什么： 导航到侧面菜单中带有 link 的选项卡。我的侧边菜单包含两个离子项目，带有点击监听器的简单按钮。在 Ionic 1.x 中，我可以使用 ui-sref 或 href 来匹配特定状态，但在 Ionic 2 中，我不知道如何控制我的选项卡。我可以通过给它一个 ID 并使用 app.getComponent('nav') 来访问 ion-nav，但是我不能以这种方式定位 ion-tabs（希望它将绑定到 Tabs 控制器实例）。

Answer 1

我通过以下方式使它正常工作：

app.ts

import {App, IonicApp, Platform} from 'ionic-angular';

@App({
  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
})

export class TestApp {
  rootPage: any = TabsPage;
  constructor(
    private platform: Platform,
    private app: IonicApp
    ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
    });
  }
}

tabs.html

        <ion-menu [content]="content">
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
          <ion-content>
            <ion-list>
              <ion-item (click)="openPage(p)" *ngFor="#p of pages;>
                <span>{{p.title}}</span>
              </ion-item>
            </ion-list>
          </ion-content>
        </ion-menu>
        <ion-tabs id="navTabs" #content swipe-back-enabled="false">
          <ion-tab [root]="tab1"></ion-tab>
          <ion-tab [root]="tab2"></ion-tab>
          <ion-tab [root]="tab3"></ion-tab>
        </ion-tabs>

tabs.ts

    import {Page, NavController, MenuController} from 'ionic-angular';
    @Page({
      templateUrl: 'build/pages/tabs/tabs.html'
    })

    export class TabsPage {

      pages: Array<{ title: string, component: any }>;
      tab1: any = Tab1;
      tab2: any = Tab2;
      tab3: any = Tab3;
      page: any = Page;


      constructor(private nav: NavController,
                  private menu: MenuController) {
        this.tab1 = Tab1;
        this.tab2 = Tab2;
        this.tab3 = Tab3;
        this.pages = [
              { title: 'page-menu', component: Page }
        ];
      }
      openPage(page) {
        // close the menu when clicking a link from the menu
        this.menu.close();
        // navigate to the new page if it is not the current page
      }
    }

Answer 2

每个 ion-tab 都是 NavController 的声明性组件。基本上，每个选项卡都是一个 NavController。有关使用导航控制器的更多信息，请查看 NavController API 文档。

因此，要从特定标签页（组件）内部访问标签数组，我们可以简单地设置目标路径：

NavController.parent

现在假设，我们位于其中一个选项卡的子页面中 - 组件 class 将有点类似于以下内容：

import { Component } from '@angular/core';
import { NavController, Nav , Tabs } from 'ionic-angular';

// import Tabs

import { Page2} from '../page-2/page-2';
import { Page3} from '../page-3/page-3';

@Component({
  templateUrl: 'build/pages/page-1/page1.html'
})
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);
  }
}

希望对您有所帮助。

Answer 3

我的解决方案：

tabs.html ：这里的主要技巧是使用#tabs

<ion-tabs tabs-only tabsLayout="icon-start" color="light" #tabs>
  <ion-tab [root]="tabPage1" tabTitle="Mapa" tabIcon="qi-location arrow">
</ion-tab>
<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger"> </ion-tab>
</ion-tabs>

tabs.ts：使用@ViewChild绑定tabs.html

中使用的通配符

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {

  @ViewChild('tabs') tabRef: Tabs;

  tabPage1: any = HomePage;
  tabPage2: any = InProgressPage;

  constructor() {
  }

  switchToHomePage(){
    this.tabRef.select(0);
  }

  switchToInProgressPage(){
    this.tabRef.select(1);
  }
}

要重定向的另一个页面 : 使用@Inject(forwardRef(() => TabsPage)) 访问父页面方法。

export class AnotherPage {

    constructor(@Inject(forwardRef(() => TabsPage)) private tabsPage:TabsPage){}

    switchToHome(){
      this.tabsPage.switchToHomePage();
    }
}

如何在 ionic 2 中 select 标签？

How to select tabs in ionic 2?

ionic2