web-dev-qa-db-fra.com

Comment sélectionner les onglets dans ionic 2?

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

Le modèle de départ des onglets initialise un projet avec un ion-nav dont la page racine pointe sur "rootPage", propriété du @App pointant sur une classe TabsPage.

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

La classe TabsPage définit 3 propriétés, une pour chaque page, pointant vers leurs classes respectives (chaque classe est décorée avec @Page). Mais la classe TabsPage elle-même ne semble pas avoir de fonction, ni être équipée d’un contrôleur d’onglets et je trouve peu ou pas de documentation sur l’acquisition d’une instance Tabs (il existe des méthodes d’instance référencées sur http: // ionicframework. com/docs/v2/api/composants/onglets/onglets/ )

Ce que j'ai réussi à faire: Utilisez un onglet pour contrôler l'autre.

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 contient une instance Tabs qui hérite de NavController. L'instance Onglets a la méthode désirée select et je peux pointer vers un onglet différent (par index, pas par nom). Donc, dans cette situation, la sélection de mon onglet 'timeline' déclenchera le constructeur, et au lieu d'aller dans l'onglet timeline, nous finissons par sélectionner le 2ème onglet.

Ce que je voudrais faire: accédez à un onglet avec un lien dans le menu latéral . Mon menu latéral se compose de deux éléments ioniques, de simples boutons avec un écouteur de clic. Dans Ionic 1.x, je pourrais utiliser un ui-sref ou un href pour correspondre à un certain état, mais dans Ionic 2, je ne sais pas comment contrôler mes onglets . Je peux accéder au ion-nav en lui attribuant un identifiant et en utilisant app.getComponent('nav'), mais je ne peux pas cibler les ion-tabs de cette façon (en espérant que cela serait lié à une instance de contrôleur Tabs).

ionic2
14
Thomas Withaar

Chaque onglet est un composant déclaratif pour un NavController. Fondamentalement, chaque onglet est un NavController. Pour plus d'informations sur l'utilisation des contrôleurs de navigation, consultez la documentation de l'API NavController. 

Donc, pour accéder au tableau d'onglets depuis une page d'onglets spécifique (composant), nous pouvons définir notre chemin cible avec aussi simple que:

NavController.parent

Supposons maintenant que nous sommes dans une page enfant de l'un de nos onglets - la classe de composant sera un peu similaire à celle 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);
  }
}

J'espère que cela t'aides.

14
Arup Bhattacharya

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

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
Baart

ma solution:

tabs.html : La principale astuce ici est d'utiliser #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 : Utilisez @ViewChild pour lier le caractère générique 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 à rediriger : Utilisez @Inject (forwardRef ((= => TabsPage))) pour accéder aux méthodes de page parente.

export class AnotherPage {

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

    switchToHome(){
      this.tabsPage.switchToHomePage();
    }
}
0
Rodrigo Sene