ionic3控制tab切换，打开指定页面

假如有页面A，A中包含一个tabs组件。tabs三个root分别指向B、C、D。每个tab拥有独立的导航栈。
假如我通过A打开D或D中子页面，然后要切换tabs到B下面的子页面B1。

      let tabB = this.app.getActiveNavs()[0].parent.getByIndex(0) as Tab;
      //获取C导航控制器let tabC = this.app.getActiveNav().parent.getByIndex(1) as Tab;
      this.app.getActiveNavs()[0].setRoot(this.app.getActiveNavs()[0]["root"]).then(() => {
        tab0.setRoot("B1", { deftype: "type1" });
        //这里也可以自由控制tabB，tabB是选项卡B的独立的导航控制器。
        this.app.getActiveNavs()[0].parent.select(0);
      });

如果要获取跟ioc-nav容器，并设置页面返回初始登录页面

标签父子关系：ion-nav>ion-tabs>ion-tab

this.app.getActiveNav().parent.parent.setRoot("loginPage")

this.app.getActiveNav().parent表示ion-tabs
this.app.getActiveNav().parent.parent表示ion-nav
我们所有的页面元素都是包含在ion-nav中，这是整个项目的根节点。

---

下面是看到的比较好的一段解释：

过往我们在网页上进行页面之间的链接，是通过标签来实现的。而我们现在制作的 web APP，虽然使用了前端技术，但页面的概念跟之前却所有不同。

ionic APP在编译过后，实际上只有一个index.html网页，它是一个单页面应用。你所看到的页面之间的切换，实际上都是利用 js 来替换界面上的元素，并不是传统意义上的网页之间的跳转。因为传统的网页跳转，是需要向服务器发送请求并下载资源的，即便再快的网速都会有一定的响应时间。这在浏览器上非常正常，但如果是在手机APP上，这样的响应时间会严重影响操作的流畅性。而单页面已经加载了基础的资源，在操作过程中，只需要替换部分的内容，请求部分的资源，配合一些交互设计，让操作没有卡顿感。所以在移动web盛行的今天，单页面应用也是一种大势所趋。

ionic APP中的页面实质上是一个栈的结构（实际上多数原生应用也是这样的），但从当前页面上引入一个新页面时，浏览器（或操作系统）会加载新页面的资源，然后把它添加到栈顶。在界面上的表现就是，新页面“遮住了”原有的页面，下层页面的内容和资源依旧在内存中。

image

而上层页面被pop掉的时候，上层页面弹出栈，相应的内存被释放（在图中栈顶由C变成了B），在视觉表现上就是上面的页面被“移开”了，下层的页面“暴露了出来”。

image

所以APP中的页面是有层级关系的，用户在首页一层一层地进入了新页面（A->B->C），回到首页时就得一层一层退出来（C->B->A），所以我们在设计页面的时候，脑海中有明确这样的层级关系，如果栈的层次过多了（超过了5层），就会给用户体验带来困扰。

最后提一下TabsPage，TabsPage可以被理解层一个特殊的页面，这个页面中又包含了若干个页面栈（Tab），每个页面栈相互独立，通过Tab按钮来相互切换。一个页面栈中的push和pop不会影响到其它栈的表现，也就是当你在不同的tab中切换时，看到的响应的栈顶页面。

image

参考：来扯点ionic3[2] 页面一线牵 珍惜这段缘