web-dev-qa-db-fra.com

Ionic 2 - Menu latéral avec navigation entre les pages (bouton Précédent)

Je suis nouveau dans le développement d'applications hybrides. Je veux d’abord savoir s’il est possible de naviguer entre les pages en utilisant un menu latéral dans Ionic 2. J’ai été en mesure de mettre en place une navigation entre les pages comme indiqué dans ce tutoriel et un menu comme dans le site ionicdocs . Mais quand je clique sur un élément de menu, le menu définit la page comme "rootPage", je suis donc redirigé vers cette page, mais si je veux revenir à la page d'accueil, je dois le faire via le menu. tiens à appuyer sur un bouton de retour.

Merci d'avance, voici mon fichier app.ts:

import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
  template: `
<ion-menu [content]="content">
<ion-toolbar>
    <ion-title>Menu</ion-title>
</ion-toolbar>

<ion-content>
    <ion-list>
        <button ion-item (click)="openPage(categoriesPage)">
            Categorías
        </button>
        <button ion-item>
            Mis Compras
        </button>
        <button ion-item>
            Lista de Deseos
        </button>
        <button ion-item>
            Cerrar Sesión
        </button>
    </ion-list>
</ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;
  public app;
  public menu;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, menu: MenuController) {

      this.app = app;
      this.menu = menu;
      this.categoriesPage = CategoriesPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });

    this.rootPage = HomePage;
  }

  openPage(page){
    this.rootPage = page;
    this.menu.close();
  }
}

EDIT: App.ts modifié pour utiliser NavController, mais maintenant, il ne charge même pas la page d'accueil

import {App, IonicApp, Platform, NavController, MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
import {CategoriesPage} from './pages/categories/categories';

@App({
template: `
<ion-menu [content]="content">
    <ion-toolbar>
        <ion-title>Menu</ion-title>
    </ion-toolbar>

    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(categoriesPage)">
                Categorías
            </button>
            <button ion-item>
                Mis Compras
            </button>
            <button ion-item>
                Lista de Deseos
            </button>
            <button ion-item>
                Cerrar Sesión
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>`,
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  public rootPage;

  public app;
  public nav;
  public categoriesPage;

  constructor(app: IonicApp, platform: Platform, nav: NavController) {

      this.app = app;
      this.nav = nav;
      this.categoriesPage = CategoriesPage;

      platform.ready().then(() => {
          StatusBar.styleDefault();
    });

    this.rootPage = HomePage;

  }

  openPage(page){
    this.nav.Push(page, {"test": ""});
  }
}

catégories.html:

<ion-navbar *navbar>  
  <ion-title>
      Categories
  </ion-title>
</ion-navbar>
<ion-content class="categories">  
  <ion-list inset>
      <ion-item>
          <ion-label>Categories</ion-label>
      </ion-item>
  </ion-list>
</ion-content>
typescriptionic-frameworkangularionic2
6
myrmix

Vous devez importer la page que vous souhaitez ouvrir:

import {ExamplePage} from 'path/to/page';

et alors vous pouvez pousser ceci au nav (pile):

openPage() {
   this.nav.Push(ExamplePage);
}
2
Pascal Rijk

Considérez les pages que vous naviguez comme une pile de pages

  nav.Push(YourPage)

lorsque vous utilisez nav.Push (YourPags) - la nouvelle page est ajoutée en haut de la pile, puis les vues précédentes restent dans la pile, ce qui vous permet d'utiliser le bouton Précédent pour naviguer vers la vue précédente

  nav.setRoot(YourPage)

lorsque vous utilisez nav.setRoot (YourPage) - définit la page comme première vue de la pile et efface toutes les autres vues de la pile 

2
Athul Raj

Vous souhaitez utiliser NavController pour la navigation http://ionicframework.com/docs/v2/api/components/nav/NavController/ . Il suffit de l'injecter dans votre page via le constructeur, puis de modifier votre fonction openPage:

openPage(page) {
   this.nav.Push(page);
}

Pensez à la navigation fonctionnant comme une pile. Vous appuyez sur une page de la pile, puis un bouton de retour devrait apparaître pour vous permettre de la sortir de la pile. N'oubliez pas que pour qu'un bouton Précédent apparaisse, vous devez utiliser la balise ion-navbar dans la page vers laquelle vous naviguez.

1
Pat Murray

Ce message est une copie de une autre réponse que j’ai donnée et qui vous aidera à naviguer, ainsi qu’à envoyer et recevoir des données d’une vue à une autre (car vous aurez évidemment ce problème bientôt):

D'abord, envoi de données:

import { YourPage } from '../yourpage/yourpage';

@Component({
  template: `<button [navPush]="pushPage [navParams]="params">Go</button>`
})
class MyPage {
  constructor(){
    this.pushPage = YourPage;
    this.params = { id: 42 };
  }
}

Le contenu du modèle peut être écrit dans un fichier html lié par le paramètre templateUrl . Ce code vous permettra d'accéder à YourPage à partir de MyPage avec les données suivantes: { id: 42 }.

Plus d'informations: http://ionicframework.com/docs/v2/api/components/nav/NavPush/

Deuxièmement, recevoir des données

 constructor(public params: NavParams){
   // userParams is an object we have in our nav-parameters
   this.params.get('userParams');
 }

Plus d'informations: http://ionicframework.com/docs/v2/api/components/nav/NavParams/

0
Guillaume Le Mière