Как выбрать вкладки в ионных 2?

Я пытаюсь создать базовое приложение в Ionic2, которое использует как боковое меню, так и навигацию по вкладкам. Я понимаю понятия стека навигации и что каждая вкладка имеет свой собственный стек навигации, но я не могу понять контроль над вкладками.

Шаблон стартового шаблона вкладок инициализирует проект с одним 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/)

Что мне удалось сделать: Используйте одну вкладку для управления другой.

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" приведет к созданию конструктора, и вместо перехода на вкладку временной шкалы мы выберем вторую вкладку.

Что я хотел бы сделать: перейдите на вкладку со ссылкой в боковом меню. Мое боковое меню состоит из двух ионных элементов, простых кнопок с прослушивателем кликов. В Ionic 1.x я мог бы использовать ui-sref или href для соответствия определенному состоянию, но в Ionic 2 я не могу понять, как управлять моими вкладками. Я могу получить доступ к ion-nav, указав ему идентификатор и используя app.getComponent('nav'), но я не могу настроить таргетинг на вкладки с ионами (надеясь, что он будет связан с экземпляром контроллера Tabs).

Ответ 1

Каждая вкладка ion является декларативным компонентом для NavController. В принципе, каждая вкладка является NavController. Дополнительные сведения об использовании контроллеров навигации см. В Документах API NavController.

Итак, чтобы получить доступ к массиву вкладок изнутри отдельной вкладки (компонента), мы можем установить наш целевой путь так же просто, как:

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

Надеюсь, что это поможет.

Ответ 2

Я работаю следующим образом:

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

Ответ 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 для связывания wild card, используемой в 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();
    }
}