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() 是不允許返回的。