ionic3跳转页面的方法

ionic3很好很强大，有人喷有人赞。不想参与其中，个人认为如果能很好的满足需求，好坏都是无所谓的，最合适的才是最好的。总结下最近使用ionic3的一些知识点，方便以后查询。多句嘴：会ionic3和只会ionic3是两个境界。

今天有妹子镇楼。今天的是……

 

2B小姐姐

页面想要“跳来跳去”的需要借助“工具”才能实现，就好像我们要攀岩需要有绳子一样，当前的“绳子”就是我们出场率很高的导航控制器NavController，首先需要在在页面顶端引入

import { NavController } from  ‘ionic-angular’

项目中的实际应用情况见下图：

 

导航控制器

只是引用组件的话，我们的导航控制器还不能使用，必须在构造器中初始化组件才能进行下一步。

//构造器中初始化组件
 constructor(public navCtrl: NavController) {
   //do some thing
  // or
  // don`t
  }

 

构造器中初始化导航控制器

然后我们就可以用navCtrl的的push方法来跳转想要的组件页面。根据typescript的尿性，一般情况下我们需要这样使用：

this.navCtrl.push(XXXPage,{data});

 

跳转至LoginPage组件

很简单不是么？不过这只是开始，世界上唯一不变的就是变化，具体使用情境的逻辑或是客户的异想天开，总会给我们带来各种各样的奇葩体验。后面就是进阶装B阶段，都闪开！

 

我要开始装了，都闪开

假设一种情景，我们的页面已经进入的足够深，例如:

列表A --> 列表A2 --> 列表A23--> 列表A235 --> .... --> 内容

ionic3的默认方法只是返回上一级，如果我们想从内容返回至列表A，必须很麻烦的从内容逐级点返回按钮来返回上一级直至列表A，有多少层就要点击多少次，要是路径足够深估计会点到内伤吐血，这样的设计会大幅度降低用户体验。有没有什么方法可以从内容直接返回至列表A呢？

回答是肯定的，万物皆有道。万物皆有法。道法文档，才能一切皆有可能。方法popToRoot就是这样一个方便的神器，它可以直接让我们返回至导航的根位置，而不管它距离根有多远。关于这货的使用方法我摘抄自ionic3官方文档NavController部分。

popToRoot(opts)

Navigate back to the root of the stack, no matter how far back that is. <<注意这句话

Param	Type	Details
opts	object	Nav options to go with this transition.

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

opts决定了在跳转时候的过渡效果，在完成功能最高权重思想的指引下下，这个参数我们可以无视。popToRoot方法在具体项目中的运用:

 

返回导航的根

哈哈！这下我们再也不怕“深”了。有此利器，再深我们也能自信满满的进去闯一闯。(气氛怎么有点怪怪的?)

 

完了么？没有！！具体使用情境是千变万化的，从来没有固定套路。popToRoot很强大，但是有一种情况绝对会让它无能为力。

 

例如，我们有三个tabs，在tabs3下面的的深层路径组件使用popToRoot只能让我们直接返回到tabs3的页面。就像下图所示。

 

返回root的根

这样的原因是因为我们在tab.html中已经设置了每个root。所以我们的popToRoot只能让我们返回至各自的root.

 

设置root

我们会经常遇见这种情况，就是我们需要从tabs3下面的深层次组件需要跳转到tabs1的根。这个需求是popToRoot无法满足的。

例如在项目中我的tabs3是设置选项，如果不是登录状态的话有些设置是不能操作的，这个时候需要提示用户登录，在提示界面如果用户不点击登录而是点击返回。在返回事件中使用popToRoot只会让我们返回tabs3页面，这恰恰不是我们需要的，我们需要的是用户直接返回至tabs1的首页。看来还要想另外的办法。

 

跳转不同的根

万事不决找文档。其实目前问题已经转向了，并不是导航NavController的功能范畴了，tabs的加入让问题开始变的扑朔迷离，看来我们需要从tabs相关文档开始查阅。

功夫不负有心人，在ionic3官方文档tabs部分中我们找到了一下的这句话:

You can also switch tabs from a child component by calling select() on the parent view using the NavController instance. For example, assuming you have a TabsPage component, you could call the following from any of the child components to switch to TabsRoot3:

switchTabs() {
this.navCtrl.parent.select(2);
}

select方法的参数是tabs的index值，从零开始计算。

这个方法可以让我们从一个组件中直接跳转到不同的tabs根位置。例如我的项目中是这样用的：

 

跨根跳转

刚接触ionic肯定会有错误，欢迎指正，不欢迎吐槽~

 

报告完毕