Changer les onglets dynamiquement dans Ionic 2
Je suis entrain de créer un Ioniques demande où je suis, à l'aide d'onglets. Je veux être en mesure de naviguer d'un onglet à l'autre en utilisant le fichier d'enregistrement de la classe du composant attaché à l'onglet modèle. Par exemple, Onglet 2 doit être activé lors du déclenchement d'un événement dans l'onglet 1.
Mon onglet des charges dans les onglets et tout va bien tant que je manuellement, cliquez sur l'onglet à déplacer, mais en essayant de changer de contexte dans le code-behind a été très difficile.
Au moment du chargement, je suis en mesure de faire tout un des onglets active par simple réglage de la [selectedIndex] attribut de l'ion-onglets de la valeur d'un attribut dans mes onglets de la classe du composant.
Onglets Modèle Parent - tab.html
<ion-tabs #tabParent [selectedIndex]="tabToShow">
<ion-tab tabTitle="Tab 1" [root]="tab2" [rootParams]="{parent : tabParent}"></ion-tab>
<ion-tab tabTitle="Tab 2" [root]="tab2" [rootParams]="{parent : tabParent}></ion-tab>
<ion-tab tabTitle="Tab 3" [root]="tab3" [rootParams]="{parent : tabParent}></ion-tab>
</ion-tabs>
Composant - onglet.ts
import {Page} from 'ionic-angular';
import {Tab1} from '../tab1/tab1.ts';
import {Tab2} from '../tab2/tab2.ts';
import {Tab3} from '../tab3/tab3.ts';
@Page({
templateUrl : 'build/pages/tab/tab.html'
})
export class Tab{
tab1: any;
tab2: any;
tab3: any;
tabToShow : number = 1;
ngOnInit(){
this.tab1 = Tab1;
this.tab2 = Tab2;
this.tab3 = Tab3;
}
}
Dans le composant pour le premier onglet (Tab1
), je suis en mesure d'obtenir une référence à la mère des onglets en utilisant [rootParams] = "{parent : tabParent}"
et je suis en mesure d'accéder à toutes les propriétés disponibles exposés par les pattes de l'objet. Un événement généré sur le tab1.html modèle, les causes de la goToTab2()
à être appelé. Donc, j'ai été en mesure de définir SelectedIndex
à 1 (qui je m'attends à modifier l'onglet actif dans le deuxième onglet). Mais l'onglet n'est pas en train de changer.
tab1.ts
import {Page, NavParams} from 'ionic-angular';
import {Tab2} from '../tab/tab2/tab2.ts'
@Page({
templateUrl : 'build/pages/tab/tab1/tab1.html'
})
export class Tab1{
parent : any;
constructor(nav : NavParams){
this.parent = nav.data;
}
goToTab2(event, value): void{
this.parent.parent.selectedIndex = 1;
console.log(this.parent.parent);
}
}
J'ai besoin d'aide, ce que je fais mal?
source d'informationauteur oladejo sola
Vous devez vous connecter pour publier un commentaire.
J'ai eu le même problème et après les heures de l'essayer et de débogage, il s'est avéré être si simple:
}
tabIndex commence à partir de 0
Je voulais accédez à des pages à onglets à partir d'un menu latéral. Afin de permettre que je n'ai suivantes:
Tabs.html:
Onglets.ts
}
Alors j'ai juste passé l'onglet paramètre à partir de l'app.composante.ts
}
Puis dans app.html
Là vous l'avez...
Encore plus facile maintenant! Vous pouvez ajouter la propriété selectedIndex attribut
Pour Ionique 3+, vous n'avez pas accès à
this.nav
de sorte que vous pouvez utiliser une fonction telle que:Si la fonction est définie dans une classe commune (importés dans toutes vos pages), vous pouvez appeler partout où vous le voulez:
Dans votre tab1 composant (tab1.ts),essayez d'injecter le composant parent Onglet :
Vous pouvez obtenir des onglets en utilisant
@ViewChild
ouIonicApp.getComponent()
.Le bouton-onglet peut être consulté en passant par les onglets.
L'onglet sur le bouton de l'événement est lié à
onClick
fonction à l'aide de@HostListener
.Vous pouvez changer d'onglet en appelant l'onglet bouton onClick du bouton.