Ionic的页面堆栈与Tabs菜单相遇的问题（页面堆栈有多个）

本来的需求：

新建的Ionic项目是Tabs菜单，假设有两个选项卡 A 和 B（从左到右），对应的两个页面的代码完全一样，使用了echarts 插件，并且使用了一个获取页面元素的方法，给自己的一个变量赋值，然后将echarts图写入到这个元素里面。

html中
<div id="chartContainer"></div>

ts中
this.chartContainer = document.getElementById('chartContainer');

 

这样导致的效果是：

两个页面上的echarts图，在A 页面切换到B 选项卡的时候，A 能展示，B 为空白；若先打开B页面， B页面能展示echarts图，切换到A页面，A页面也能展示echarts图，但是再返回B页面，B页面就不能显示echarts了。

最后当我把其中一个的id更改了以后，就没有这个问题了。

我的理解是：

Tabs菜单有两个，对应的页面堆栈就有两个，这两个页面堆栈还有优先级，跟tabs.ts 中代码的顺序有关。

A 切换到B ，A 能展示，B 为空白：当我打开了A 页面，栈区里记录了A 页面的元素 <div id="chartContainer"></div> 。当我再打开B 页面的时候，A 页面并没有被销毁，它在栈区的变量也就没有移出去。此时再打开B 页面，通过document.getElementById('chartContainer'); 获取到的元素，仍然是A 页面中的元素。所以B 页面才会是空白的。

B切换到A，还是A展示，B不能展示：是因为要优先读取A栈区中的值。

 

证明：

1、验证页面堆栈就有多个，在A和B两个页面，分别添加一段代码，跳转到根页面，看一看是否是同一个页面。

在两个页面中都添加同样的一段代码：

html中

<button (click)="f()">测试</button>

ts中
f(){
　　this.navCtrl.popToRoot();
}

结果：分别跳转回了对应的Tabs 菜单的首页。

 

2、验证页面堆栈有优先级，跟tabs.ts 中代码的顺序有关

　　将tabs.ts 文件中的两行代码换下顺序，看一看结果是否会颠倒。

原来的代码是：

<ion-tabs>
　　<ion-tab [root]="tab1Root" tabTitle="A"></ion-tab>
　　<ion-tab [root]="tab2Root" tabTitle="B"></ion-tab>
</ion-tabs>

更改后为：

<ion-tabs>
　　<ion-tab [root]="tab2Root" tabTitle="B"></ion-tab>
　　<ion-tab [root]="tab1Root" tabTitle="A"></ion-tab>
</ion-tabs>

结果：B 切换到A ，B 能展示，A 为空白；A切换到B，还是B展示，A不能展示，确实颠倒了。

 

我觉得我的理解是正确的，如有不对，请指正！

 

原创文章，欢迎转载，转载请注明出处！