8、导航：Nav

1、导航视图

 

angular2 中的是视图是显示在<router-outlet></router-outlet>里的同时他要依赖于 directives:[ ROUTER_DIRECTIVES ]，还必须要配置RouteConfig 然而ionic 是这样的。

/* ---示例代码----*/
 
import {Component} from '@angular/core';
import {ionicBootstrap} from 'ionic-angular';
import {GettingStartedPage} from './getting-started';
 
@Component({
  template: `<ion-navswipeBackEnabled="false" [root]="rootPage"></ion-nav>`
})
class MyApp {
  root = GettingStartedPage;
}
 
ionicBootstrap(MyApp);
 
/* ---示例代码----*/

其中 swipeBackEnabled="false" 代表是否可以后退
如上看来他直接省去了 RouteConfig 我们只需要控制 变量 root 所指向的 组件 就可以完成。视图的渲染器了。他的简便让我忘记了ng2.。。。。

 2、ion-navbar

/* ---示例代码----*/
 
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>
    Page Title
  </ion-title>
 
  <ion-buttons end>
    <button (click)="openModal()">
      <ion-icon name="options"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>
 
/* ---示例代码----*/

作用于页面的导航header 他的效果。

3、NavController

 

首先需要导入。

/* ---示例代码----*/
 
import {NavController, NavParams} from 'ionic-angular';
 
class MyComponent {
  constructor(nav: NavController) {
    this.nav = nav;
  }
}
 
/* ---示例代码----*/

比较火热的就是 this.nav.setRoot(page,params,opt); 了这个方法 有三个参数。

1、page 组件  ： 想放进导航的 组件名称    

2、params 参数：像下一个页面传递参数 Object类型

3、过度完成。返回一个promise

例如：

他还有一些方法 和生命周期。 http://ionicframework.com/docs/v2/api/components/nav/NavController/

还有就是  this.nav.push(page,params); 他是一个异步的。带有过度效果 而nav.setRoot()是一个view的切换 因此他并没有返回button之类的东西，当从一个页面过来 需要可以有后退按钮的时候 需要用到 push 比如 我一个view里面有3个页面 这三个页面并没有任何关系。这个时候用 setRoot 如果我是从一个页面进到他的类似于子页面的时候 这个时候可以用push 

 

4、NavParams

 

/* ---示例代码----*/
 
export class MyClass{
 constructor(params: NavParams){
   this.params = params;
   // userParams is an object we have in our nav-parameters
   this.params.get('userParams');
 }
}
 
/* ---示例代码----*/

他有一个get方法 接受 object里面的属性。和ng2一样。

5、NavPush 和 navParams 属性

我们上面看了this.nav.push他是一个方法。

我们在初始生成的时候 list.html 页面和 list.js是这么写的

/* ---list.html---*/
 
<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>My First List</ion-title>
</ion-navbar>
 
<ion-content>
  <ion-list>
    <button ion-item  *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-icon name="{{item.icon}}" item-left></ion-icon>
      {{item.title}}
      <div class="item-note" item-right>
        {{item.note}}
      </div>
    </button>
  </ion-list>
  <div *ngIf="selectedItem" padding>
    You navigated here from <b>{{selectedItem.title}}</b>
  </div>
</ion-content>
 
/* ---list.html---*/

/* ---list.js---*/
 
import {Page, NavController, NavParams} from 'ionic-angular';
import {ItemDetailsPage} from '../item-details/item-details';
 
 
@Page({
  templateUrl: 'build/pages/list/list.html'
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;
 
  constructor(private nav: NavController, navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');
 
    this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
    'american-football', 'boat', 'bluetooth', 'build'];
 
    this.items = [];
    for(let i = 1; i < 11; i++) {
      this.items.push({
        title: 'Item ' + i,
        note: 'This is item #' + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }
  itemTapped(event, item) {
    this.nav.push(ItemDetailsPage, {
      item: item
    });
  }
}
 
/* ---list.js---*/

可以看得出来 list列表 绑定了 每个点击方法 。点击方法 又触发了 itemTapped方法 跳转到页面 ，这样的话做一些简单的操作 感觉没有必要再写一些方法了。这样很麻烦。

这个属性 可以很有效的帮助你。把html页面 红色部分

<button ion-item  *ngFor="let item of items" (click)="itemTapped($event, item)">

改成。 <button ion-item [navPush]="pushPage" [navParams]="{ item: item}" *ngFor="let item of items" >

再把js部分 的 itemTapped方法 改成。pushPage = ItemDetailsPage; ItemDetailsPage 对应着组件。

这样是不是很简单的就导航到另一个页面 并且传了参数？

5、nav-pop 返回

我在item-details.html中添加了一行代码 红色部分

/* ---示例代码----*/
 
<ion-navbar *navbar>
  <button menuToggle *ngIf="!selectedItem">
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Item Details</ion-title>
</ion-navbar>
 
<ion-content>
 <div *ngIf="selectedItem" class="selection">
    <b>{{selectedItem.title}}</b>
    <ion-icon name="{{selectedItem.icon}}"></ion-icon>
    <div>
      You navigated here from <b>{{selectedItem.title}}</b>
    </div>
  </div>
 
    <button block nav-pop>返回</button>
</ion-content>
 
/* ---示例代码----*/

他的作用是返回上级页面 这个时候他就可以返回到list页面了 这时候也体现出了 nav.setRoot() 与 nav.push(); 的差别  nav.setRoot() 是不允许返回的。