Ionic2中的Navigation.md （返回到指定页面？）

一时失言乱红尘 2022-05-10 04:20 266阅读 0赞

原文出处：[http://www.cnblogs.com/gavin-cn/p/6869066.html][http_www.cnblogs.com_gavin-cn_p_6869066.html]

# 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`**，如下图：  
![1167545-20170517183650791-374638200.png][]

各个Component中注入的`NavController`对应的`<ion-nav>`如下：  
1、我们如何从`Component Root`中获取到nav1呢？  
2、我们如何从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官方文档是这么解释的][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';    //1.引入ViewChild
    import { NavController } from 'ionic-angular';
     
    @Component({
       template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'  //2.用ion-nav声明模板
    })
    export class MyApp {
       @ViewChild('myNav') nav: NavController   //3.声明用子页面模式加载
       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);
       }
    }

补充说明：（来源：[ionic2中 NavController导航组件用法方法关于页面的导航][ionic2_ NavController]， 有较详细解说，值得阅读）  
       @ViewChild获取Nav组件的一个实例

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

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

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.

<table> 
 <thead> 
  <tr> 
   <th>Param</th> 
   <th>Type</th> 
   <th>Details</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>page</td> 
   <td>Page or string or ViewController</td> 
   <td>The name of the component you want to push on the navigation stack.</td> 
  </tr> 
  <tr> 
   <td>params</td> 
   <td>object</td> 
   <td>Any NavParams you want to pass along to the next view.OPTIONAL</td> 
  </tr> 
  <tr> 
   <td>opts</td> 
   <td>object</td> 
   <td>Any options you want to use pass to transtion.OPTIONAL</td> 
  </tr> 
 </tbody> 
</table>

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');
      }
    }

其他的还有很多导航入栈方法，具体可以查看[官方文档][Link 1]：  
`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)`  
都比较简单，具体的查看[官方文档][Link 1]

## 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/

[http_www.cnblogs.com_gavin-cn_p_6869066.html]: http://www.cnblogs.com/gavin-cn/p/6869066.html
[1167545-20170517183650791-374638200.png]: /images/20220510/5a036ecddd7648c989f98ec8a9e16a71.png
[Angular]: https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html
[ionic2_ NavController]: https://blog.csdn.net/qq_34645412/article/details/76033045
[Link 1]: https://ionicframework.com/docs/api/navigation/NavController/