Ionic 2 - Боковое меню с навигацией между страницами (кнопка назад)

Question

Я новичок в разработке гибридных приложений. Сначала я хочу знать, возможно ли иметь навигацию между страницами, используя боковое меню в Ionic 2. Я смог реализовать навигацию между страницами, как показано в this tutorial, и меню, как показано в ionicdocs site. Но когда я нажимаю на элемент меню, меню устанавливает страницу как «rootPage», поэтому я перенаправляется на эту страницу, но если я хочу вернуться на домашнюю страницу, я должен сделать это через меню, я бы просто нажмите кнопку «Назад».

Заранее спасибо, это мой 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 использовать NavController, но теперь это даже не загружая страниса

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> 

Answer 1

Вы хотите использовать NavController для навигации http://ionicframework.com/docs/v2/api/components/nav/NavController/. Просто введите его на свою страницу через конструктор, а затем измените функцию openPage:

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

Думайте о навигации, работающей как стек. Вы нажимаете страницу в стеке, а затем появляется кнопка «Назад», позволяющая вытащить страницу из стека. Имейте в виду, что для того, чтобы появилась кнопка «Назад», вы должны использовать тег ion-navbar на странице, на которую вы переходите.

Answer 2

Вы должны импортировать страницу, которую вы хотите т.е открыть:

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

, а затем вы можете нажать это нав (стек):

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

Answer 3

Это сообщение является копией another answer I «Это даст вам возможность перемещаться и отправлять и получать данные с точки зрения на другую (потому что у вас, очевидно, будет такая проблема в ближайшее время):

Firs т, отправляемые данные:

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

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

Содержание шаблона может быть записан в HTML-файл, связанный параметром templateUrl. Этот код позволит вам перейти на страницу YourPage из MyPage со следующими данными: { id: 42 }.

Дополнительная информация: http://ionicframework.com/docs/v2/api/components/nav/NavPush/

Во-вторых, получение данных

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

Дополнительная информация: http://ionicframework.com/docs/v2/api/components/nav/NavParams/

Answer 4

Рассмотрим те страницы, которые вы ориентируетесь как стопка страниц

nav.push(YourPage) 

если вы используете nav.нажимные (YourPags) - новая страница добавляется к вершине стека, а затем предыдущие просмотры остается в стеке само по себе позволяет вам использовать кнопку назад, чтобы перейти к предыдущему виду

nav.setRoot(YourPage) 

при использовании навигации .setRoot (YourPage) - устанавливает страницу как первое представление в стеке и очищает все остальные виды в стеке