首页 文章

Ionic 2 - 侧面菜单，页面之间有导航（后退按钮）

提问于
浏览 次
6

我可以使用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>
typescript ionic-framework angular ionic2

4 回答

  • 0

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

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

    然后你可以把它推到导航（堆栈）：

    openPage() {
   this.nav.push(ExamplePage);
}
    回复于
  • 1

    考虑您作为一叠页面导航的页面

    nav.push(YourPage)

    当你使用nav.push（YourPags）时 - 新页面被添加到堆栈的顶部，然后之前的视图保留在堆栈本身，使您可以使用后退按钮导航到上一个视图

    nav.setRoot(YourPage)

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

    回复于
  • 2

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

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

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

    回复于
  • 2

    那篇文章是another answer的副本我已经给出了这将帮助你导航，并从一个视图发送和接收数据到另一个（因为你很快就会遇到这个问题）：

    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 };
  }
}

    模板的内容可以写在由templateUrl参数链接的html文件中 . 该代码将允许您使用以下数据从MyPage转到YourPage： { id: 42 } .

    更多信息：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');
 }

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

    回复于

相关问题