IONIC3 - Comment créer un lien vers la page d'onglet réelle au lieu de setRoot ou pousser à la page

Question

this.navCtrl.push(ToDoPage) 
this.navCtrl.setRoot(ToDoPage) 

Lorsque j'utilise une ou l'autre de ces mon application est navigua à l'emplacement correct, mais il présente la page dans la vue de l'onglet que je . m Voici ma page d'accueil:

Et puis lorsque vous cliquez sur le bouton « Afficher tous », vous pouvez voir ci-dessous que je suis sur le à faire la page, mais je suis toujours dans l'onglet Accueil . Est-il possible de faire en sorte que lorsque j'appuie sur un bouton sur la page d'accueil, je suis amené à la page de l'onglet ToDo?

Answer 1

Pour faire ce que vous voulez, vous n'avez pas besoin de .push() une page sur la pile de navigation, thats pas comment le travail des onglets ioniques. Vous pouvez imaginer chaque onglet comme sa propre pile de navigation. Avec .push() ou .setRoot(), vous pouvez uniquement modifier la pile de l'onglet actuellement sélectionné.

Pour changer d'onglet, vous pouvez utiliser la méthode .select() du composant ionique Tabs. Tout d'abord, vous devez ajouter une référence de modèle pour vous composant pour obtenir Ahold dans votre code dactylographiée:

<ion-tabs #myTabs> 
    <ion-tab [root]="tab1Root"></ion-tab> 
    <ion-tab [root]="tab2Root"></ion-tab> 
</ion-tabs> 

Ensuite, vous accédez au composant à l'aide angulaires @ViewChild décorateur:

@ViewChild('myTabs') tabRef: Tabs; 

Et quand vous cliquez sur le bouton, vous sélectionnez le deuxième onglet comme celui-ci (le mettre dans une fonction):

this.tabRef.select(1); // selected tab is an index starting at 0 

Et here vous pouvez trouver la documentation pour tous de cela.