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是

NavControlle

r里一个声明式组件，

<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"