Ionic2中的Navigation.md

1. 概述

爲了可以獲得同原生應用相似的導航效果，Ionic建立了幾個navagation組件來實現pages之間的導航操做，這種導航跟原生Angular2中的route機制是不同的，咱們能夠藉助於一下幾種方式，在Ionic中實現導航效果：

1.1. Basic Navigation

Navigation經過一個<ion-nav>組件來實現pages之間的導航處理，<ion-nav>組件就像是一個stack，新的頁面push進入，而後pop出棧，就相似於history接口的forward和backward。
每個<ion-nav>組件都有一個root屬性來設置其根頁面。
例如定義的以下Component：

import {StartPage} from 'start'
 
@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
  // First page to push onto the stack
  rootPage = StartPage;
}

而後咱們就能夠在其root屬性指向的Root Page，以及Root Page經過push導航到的page中，經過DI的方式將NavController注入，以方便經過其push和pop進行具體導航。

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Login</ion-title>
    </ion-navbar>
  </ion-header>
 
  <ion-content>Hello World</ion-content>`
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
}

注意：這裏要強調一點，任何Component中注入的NavController都是其直接根<ion-nav>對應的NavController，以下圖：

各個Component中注入的NavController對應的<ion-nav>以下：
一、咱們如何從Component Root中獲取到nav1呢？
二、咱們如何從nav1中獲取到nav2呢？

1.2. 從Component Root中獲取nav1

在說明這一部分前，先定義兩個術語：

• Root Component：包含<ion-nav>的根Component，例如上圖中的Component Root，固然，相對於Component A來講其Root Component爲Coponent Main。
• Root Page：組件<ion-nav>中root屬性指向的Comonent，例如上圖中的Component Main相對於Component Root，Component A相對於Component Main。

在Root Component中是沒法經過DI的方式將NavController注入的，那麼如和獲取呢？
Angular提供了一個@ViewChild註解，能夠用來實現這個功能。Angular官方文檔是這麼解釋的：

You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated.

View queries are set before the ngAfterViewInit callback is called.

Metadata Properties:

• selector - the directive type or the name used for querying.
• read - read a different token from the queried elements.

在Ionic源碼中有這麼一段話：

/* ## Basic usage
 * The simplest way to navigate through an app is to create and initialize a new
 * nav controller using the `<ion-nav>` component.  `ion-nav` extends the `NavController`
 * class.
 * `ion-nav` is the declarative component for a [NavController](../../../navigation/NavController/).*/

官方推薦的獲取方式以下：

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage = TabsPage;
 
   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

1.3. 如何經過nav1獲取到nav2

NavController提供一個方法getActiveChildNav()，官方解釋以下：

Returns the active child navigation.

返回當前起做用的那個Child NavController,因此如上圖中，咱們就能夠在Component Root或Component Main中經過nav1.getActiveChildNav()來獲取nav2。

2. 高級使用

2.1. 頁面導航入棧中的參數傳遞

導航頁面入棧切換主要有以下兩個方法：
push(page, params, opts)
Push a new component onto the current navigation stack. Pass any aditional information along as an object. This additional information is accessible through NavParams

Param	Type	Details
page	Page or string	The component class or deeplink name you want to push onto the navigation stack.
params	object	Any NavParams you want to pass along to the next view.OPTIONAL
opts	object	Nav options to go with this transition.OPTIONAL

Returns: Promise
Returns a promise which is resolved when the transition has completed.

setRoot(page, params, opts)
Set the root for the current navigation stack.

Param	Type	Details
page	Page or string or ViewController	The name of the component you want to push on the navigation stack.
params	object	Any NavParams you want to pass along to the next view.OPTIONAL
opts	object	Any options you want to use pass to transtion.OPTIONAL

Returns: Promise
Returns a promise which is resolved when the transition has completed.

能夠看到push和setRoot方法的第二個參數都是params, 咱們能夠經過這個參數來進行信息傳遞，舉例以下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { OtherPage } from './other-page';
@Component({
   template: `
   <ion-header>
     <ion-navbar>
       <ion-title>Login</ion-title>
     </ion-navbar>
   </ion-header>
 
   <ion-content>
     <button ion-button (click)="pushPage()">
       Go to OtherPage
     </button>
   </ion-content>
   `
})
export class StartPage {
  constructor(public navCtrl: NavController) {
  }
 
  pushPage(){
    // push another page onto the navigation stack
    // causing the nav controller to transition to the new page
    // optional data can also be passed to the pushed page.
    this.navCtrl.push(OtherPage, {
      id: "123",
      name: "Carl"
    });
  }
}
 
import { NavParams } from 'ionic-angular';
 
@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
  constructor(private navParams: NavParams) {
     let id = navParams.get('id');
     let name = navParams.get('name');
  }
}

其餘的還有不少導航入棧方法，具體能夠查看官方文檔：
insert(insertIndex, page, params, opts)
insertPages(insertIndex, insertPages, opts)
setPages(pages, opts):Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array.

2.2. 頁面出棧方法

pop(opts)
popToRoot(opts)
remove(startIndex, removeCount, opts)
removeView(viewController, opts)
都比較簡單，具體的查看官方文檔

2.3. 其餘經常使用方法

canGoBack()
Returns true if there’s a valid previous page that we can pop back to. Otherwise returns false.
Returns: boolean

first()
Returns the first view controller in this nav controller’s stack.
Returns: ViewController

getActive()
Returns: ViewController
Returns the active page's view controller.

getViews()
Returns the current stack of views in this nav controller.
Returns: Array
the stack of view controllers in this nav controller.

indexOf(view)
Returns the index number of the given view controller.

isActive(view)
Returns if the given view is the active view or not.

last()
Returns the last page in this nav controller’s stack.
Returns: ViewController

length()
Returns the number of views in this nav controller.
Returns: number
The number of views in this stack, including the current view.

parent
The parent navigation instance. If this is the root nav, then it’ll be null. A Tab instance’s parent is Tabs, otherwise the parent would be another nav, if it’s not already the root nav.

3. ion-navbar組件

若是在Component中有一個<ion-navbar>標籤訂義，那麼能夠在<ion-navbar>中定義<ion-title>來改變界面的title，並且當這個Component不是一個rootPage的時候，就會自動添加一個回退按鈕，來實現navController.pop()相同的功能，以下圖：

Template部分代碼以下：

<ion-header>
  <ion-navbar>
    <button menuToggle *ngIf="!item">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>選擇</ion-title>
  </ion-navbar>
</ion-header>

參考： https://ionicframework.com/docs/components/#navigation https://ionicframework.com/docs/api/navigation/NavController/