typescript Ionic 2 - 带有页面间导航的侧边菜单（后退按钮）

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

提问by myrmix

I'm new to hybrid apps development. First I want to know if it's possible to have navigation between pages using a side menu in Ionic 2. I was able to implement navigation between pages as shown in this tutorialand a menu as shown in the ionicdocs site. But when I click on a menu item, the menu sets the page as "rootPage", so I'm redirected to that page, but if I want to go back to home page I have to do that through the menu, I'd like to just press a back button.

我是混合应用程序开发的新手。首先，我想知道是否可以使用 Ionic 2 中的侧边菜单在页面之间进行导航。我能够实现本教程中所示的页面和ionicdocs 站点中所示的菜单之间的导航。但是当我点击一个菜单项时，菜单将页面设置为“rootPage”，所以我被重定向到那个页面，但是如果我想回到主页，我必须通过菜单来做到这一点，我会喜欢只需按一个后退按钮。

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

提前致谢，这是我的 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: Modified app.ts to use NavController, but now it's not even loading home page

编辑：修改 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:

类别.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> 

回答by Pascal Rijk

You have to import the page you want te open:

您必须导入要打开的页面：

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

and then you can push this to the nav (stack):

然后您可以将其推送到导航（堆栈）：

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

回答by Athul Raj

Consider the pages that you navigate as a stack of pages

将您导航的页面视为一堆页面

  nav.push(YourPage)

when you use nav.push(YourPags) - the new page is added to the top of the stack and then the previous views remains in the stack itself enabling you to use the back button to navigate to the previous view

当您使用 nav.push(YourPags) 时 - 新页面被添加到堆栈的顶部，然后先前的视图保留在堆栈本身中，使您能够使用后退按钮导航到上一个视图

  nav.setRoot(YourPage)

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

当您使用 nav.setRoot(YourPage) - 将页面设置为堆栈中的第一个视图并清除堆栈中的所有其他视图

回答by Pat Murray

You want to use NavController for navigation http://ionicframework.com/docs/v2/api/components/nav/NavController/. Just inject it into your page via the constructor and then change your openPage function:

您想使用 NavController 进行导航http://ionicframework.com/docs/v2/api/components/nav/NavController/。只需通过构造函数将其注入您的页面，然后更改您的 openPage 函数：

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

Think of navigation working as a stack. You push a page on the stack and then a back button should appear letting you pop the page off the stack. Keep in mind that in order for a back button to appear you have to use the ion-navbartag within the page you are navigating to.

将导航视为堆栈。您将页面推入堆栈，然后应该会出现一个后退按钮，让您从堆栈中弹出页面。请记住，为了显示后退按钮，您必须在导航到的页面中使用ion-navbar标签。

回答by Guillaume Le Mière

That post is a copy of another answerI've given that will help you to navigate, and to send and receive data from a view to another (because you will obviously have that problem soon) :

那篇文章是我给出的另一个答案的副本，它将帮助您导航，以及从一个视图向另一个视图发送和接收数据（因为您显然很快就会遇到这个问题）：

First, sending 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 content of template can be written in an html file linked by the templateUrl parameter. That code will allow you to go to YourPage from MyPage with the following datas : { id: 42 }.

模板的内容可以写在一个由 templateUrl 参数链接的 html 文件中。该代码将允许你去YourPage从我的页面有以下DATAS： { id: 42 }。

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

更多信息：http: //ionicframework.com/docs/v2/api/components/nav/NavPush/

Second, receiving data

二、接收数据

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

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

更多信息：http: //ionicframework.com/docs/v2/api/components/nav/NavParams/