首页 文章

如何在离子2中选择标签？

提问于
浏览 次
13

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

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

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

TabsPage类定义3个属性，每个页面一个，指向它们各自的类（每个类用 @Page 装饰） . 但TabsPage类本身似乎没有任何功能，或者注入了一个标签控制器，我发现很少甚至没有关于如何获取 Tabs 实例的文档（http://ionicframework.com/docs/v2/api/components/tabs/Tabs/上引用了实例方法）

What I managed to do: 使用一个选项卡控制另一个选项卡 .

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'选项卡将触发构造函数，而不是转到时间线选项卡，我们最终选择第二个选项卡 .

What I would like to do: 导航到侧边菜单中带有链接的选项卡 . 我的侧面菜单包括两个离子项，带有咔哒声监听器的简单按钮 . 在Ionic 1.x中我可以使用ui-sref或href来匹配某个状态，但在Ionic 2中我无法弄清楚如何控制我的标签 . 我可以通过给它一个id并使用 app.getComponent('nav') 来访问 ion-nav ，但我无法以这种方式定位离子标签（希望它将绑定到Tabs控制器实例） .

ionic2

3 回答

  • 13

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

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

    NavController.parent

    现在假设，我们位于其中一个选项卡的子页面中 - 组件类将如下所示：

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

    希望这可以帮助 .

    回复于
  • 3

    我通过以下方式得到了这个：

    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
      }
    }
    回复于
  • 0

    我的解决方案

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

    Another page to redirectc ：使用@Inject（forwardRef（（）=> TabsPage））来访问父页面方法 .

    export class AnotherPage {

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

    switchToHome(){
      this.tabsPage.switchToHomePage();
    }
}
    回复于

相关问题