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

本来的需求：

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

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

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

这样导致的效果是：

两个页面上的echarts图，永远只有一个展示，另一个是空白的。在A 页面切换到B 选项卡的时候，A 能展示，B 为空白；反之亦然。

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

我的理解是：

Tabs菜单有两个，但是页面堆栈只有一个，当我打开了A 页面，栈区里记录了A 页面的元素 <div id="chartContainer"></div> 。当我再打开B 页面的时候，A 页面并没有被销毁，它在栈区的变量也就没有移出去。此时再打开B 页面，通过document.getElementById(‘chartContainer‘); 获取到的元素，仍然是A 页面中的元素。所以B 页面才会是空白的。

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

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

原文地址：https://www.cnblogs.com/acm-bingzi/p/ionicTabsStack.html