Ionic2中的内置导航组件

NavPush

定义：添加一个新页面到当前nav stack中。
这里写图片描述

上图就是一个手机的页面的删减页面，我们在按钮标签中绑定 NavPush属性进行翻页操作。

<button ion-button [navPush]="pushPage"></button>//单纯地跳转页面

<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>//通过navParams属性跳转到指定路由参数

注意:在标签中pushPage 和 params都是在你的component中定义好的参数。

import { LoginPage } from './login';

@Component({
  template: `<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>`
})
class MyPage {
  constructor(){
    this.pushPage = LoginPage;  //跳转到LoginPage路由上
    this.params = { id: 42 };   //指定路由参数的id为42
  }
}

NavPop

对于NavPop就相对简单的多，因为它就是把当前页面从nav stack中删除，你只需在button属性中添加navPop属性，点击之后当前页面就被移除。

<ion-content>

 <button ion-button navPop>Go Back</button>

</ion-content>

ion-nav

ion-nav是NavController里一个声明式组件，<ion-nav>这个ionic标签在实际app中经常被用到，它的特点在于必须通过root属性设置一个根页面。

import { Component } from '@angular/core';
import { GettingStartedPage } from './getting-started';

@Component({
  template: `<ion-nav [root]="root"></ion-nav>`  //设置一个根页面
})
class MyApp {
  root = GettingStartedPage;   //把根页面赋值给ion-nav,这样当点击ion-nav标签时就会跳转到这个根页面上
  constructor(){
  }
}

对于<ion-nav>标签，除了root属性之外，还可以设置两个属性：rootParams和swipeBackEnabled.

rootParams 用于给根页面传递一个对象参数而swipeBackEnabled是一个单纯布尔值表示这个页面是否可以返回上一页面。

NavBar

<ion-navbar>标签拥有一个back按钮，一般里面会内嵌一个<ion-title>标签，一些button按钮，一个seachbar,注意<ion-navbar>必须嵌套在<ion-header>标签内部。因为确保在动态导航stack中不会跑偏，如果你需要一个静态的toolbar,你可以使用<ion-toolbar>标签。

<ion-header>

  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Page Title
    </ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="openModal()">
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

上面就是一个典型的<ion-navbar>标签的使用场景。<ion-navbar>标签中可以设置三个属性，分别是color,hideBackButton,mode。

hideBackButton 属性如果布尔值为true的话，back按钮就会被隐藏。
mode 属性值有三个分别为“ios”，“md”，”wp”，分别代表三个不同手机平台的风格样式。
color 也就是导航条颜色的设置，也就是sass$colors的映射，选项分别有"primary", "secondary", "danger", "light", "dark"