本来的需求:
新建的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 页面才会是空白的。
我觉得我的理解是正确的,如有不对,请指正!
原创文章,欢迎转载,转载请注明出处!