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/