标签：返回 tabs popToRoot 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 objectNav 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 theNavControllerinstance. For example, assuming you have aTabsPagecomponent, you could call the following from any of the child components to switch toTabsRoot3:switchTabs() { this.navCtrl.parent.select(2); }
select方法的参数是tabs的index值，从零开始计算。
这个方法可以让我们从一个组件中直接跳转到不同的tabs根位置。例如我的项目中是这样用的：
跨根跳转
刚接触ionic肯定会有错误，欢迎指正，不欢迎吐槽~
报告完毕
标签：返回,tabs,popToRoot,ionic3,跳转,我们,页面 来源： https://www.cnblogs.com/dingxingxing/p/11150234.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。