Comment sélectionner les onglets ionique dans les 2?

J'ai du mal à créer une application de base dans Ionic2 qui utilise à la fois le côté-menu et la navigation par onglets. Je comprends les concepts de la pile de navigation et que chaque onglet dispose de sa propre pile de navigation, mais je ne peux pas saisir le contrôle sur les onglets eux-mêmes.

Les onglets modèle de démarrage initialise un projet avec un ion-nav ayant son rootpage pointant vers "rootPage", propriété de la @App pointant vers un TabsPage classe.

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

La TabsPage classe définit 3 propriétés, un pour chaque page, en pointant leurs classes respectives (chaque classe décorée avec @Page). Mais le TabsPage classe elle-même ne semble pas avoir n'importe quelle fonction, ou être injecté avec une onglets contrôleur et je trouve peu ou pas de documentation sur la façon d'acquérir une Tabs exemple (il y a des méthodes d'instance référencée sur http://ionicframework.com/docs/v2/api/components/tabs/Tabs/)

Ce que j'ai réussi à faire:
Utiliser un onglet pour contrôler les autres.

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

La page ci-dessus est injecté avec un des Onglets de l'instance, qui hérite de l'NavController. Les Onglets instance a souhaité select méthode, et je peux point à un autre onglet (par indice, non par leur nom). Donc dans ce cas la sélection de mon 'timeline' onglet va déclencher le constructeur, et au lieu d'aller à l'onglet plan chronologique à la fin nous devons sélectionner le 2ème onglet.

Ce que je voudrais faire: accédez à un onglet avec un lien dans le menu latéral.
De mon côté-menu est composé de deux ions-éléments, de simples boutons avec un écouteur de clics. Dans Ionique 1.x je pouvais utiliser une interface utilisateur-sref ou un href correspondre à un certain état, mais Ionique dans les 2 je peux pas comprendre comment le contrôle de mes onglets.
Je peux accéder à la ion-nav en lui donnant un identifiant et d'aide app.getComponent('nav'), mais je ne peux pas cibler les ions onglets de cette façon (en espérant qu'il serait lié à un des Onglets de l'instance de contrôleur).

OriginalL'auteur Thomas Withaar | 2016-04-07

  1. 13

    Chaque ion-tab est une composante déclarative pour un NavController. Fondamentalement, chaque onglet est un NavController. Pour plus d'informations sur l'utilisation de la navigation contrôleurs de prendre un coup d'oeil à la NavController les Docs de l'API.

    Donc pour accéder au tableau de la liste des onglets à l'intérieur d'un onglet de la page (composant), nous pouvons définir notre cible de chemin avec d'aussi simple que :

    NavController.parent

    Supposons maintenant, nous sommes dans une page enfant de l'un de nos onglets de la classe du composant sera un peu similaire, comme ci-dessous:

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

    Espère que cette aide.

    OriginalL'auteur Arup Bhattacharya

  2. 3

    Je reçois ce travail en suivant:

    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>

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

    OriginalL'auteur Baart

  3. 0

    ma solution:

    tabs.html : La principale astuce ici est d'utiliser #onglets

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

    onglets.ts: Utiliser @ViewChild pour lier le joker utilisé dans 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);
  }
}

    Une autre page pour redirectc : Utiliser @Inject(forwardRef(() => TabsPage)) pour obtenir l'accès à la page parent méthodes.

    export class AnotherPage {

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

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

    OriginalL'auteur Rodrigo Sene