Geek Answers Handbook

Ionic 2 - Side menu with navigation between pages (return button)

I am new to hybrid application development. Firstly, I want to know whether it is possible to have navigation between pages using the side menu in Ionic 2. I was able to implement navigation between pages, as shown in this tutorial and menu, as shown on ionicdocs website. But when I click on the menu item, the menu sets the page as "rootPage", so I get redirected to this page, but if I want to return to the home page, I have to do it through the menu, for example, I just click the "Back" button.

Thanks in advance, this is my app.ts file:

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 : Modified app.ts to use NavController, but now it doesn’t even load the home page

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

categories.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>
+6
source share
4 answers

Consider the pages you move as a stack of pages

  nav.push(YourPage)

when you use nav.push (YourPags) - a new page is added to the top of the stack, and then the previous views remain on the stack itself, allowing you to use the back button to go back to the previous view.

  nav.setRoot(YourPage)

when you use nav.setRoot (YourPage) - sets the page as the first view on the stack and clears all other views on the stack

+2
source

You need to import the page you want to open:

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

and then you can push this on nav (stack):

 openPage() { this.nav.push(ExamplePage); }
+1
source

You want to use NavController to navigate http://ionicframework.com/docs/v2/api/components/nav/NavController/ . Just add it to your page through the constructor, and then change the OpenPage function:

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

Think of navigation as a stack. You press the page on the stack, and then the back button appears, allowing you to pull the page from the stack. Keep in mind that in order for the back button to appear, you must use the ion-navbar tag on the page you are going to.

0
source

This post is a copy of another answer that I gave, which will help you navigate, as well as send and receive data from the view to another (because you will obviously have this problem soon):

First send the data:

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

The contents of the template can be written in the html file associated with the templateUrl parameter. This code will allow you to go to MyPage using MyPage with the following data: { id: 42 } .

Additional information: http://ionicframework.com/docs/v2/api/components/nav/NavPush/

Secondly, data acquisition

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

Additional information: http://ionicframework.com/docs/v2/api/components/nav/NavParams/

0
source

More articles:


All Articles