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不能展示,确实颠倒了。
我觉得我的理解是正确的,如有不对,请指正!
原创文章,欢迎转载,转载请注明出处!
最新文章
- mysql性能优化学习笔记-存储引擎
- bootstrap 不兼容ie8 的问题
- Altium Designer 画"差分线"
- android layoutparams应用指南(转)
- grunt + compass retina sprites
- Android中Toast的用法简介
- spring log4j.properties
- IIS中访问自己开发的Webservice site就自动停止,尝试重启IIS和重启服务器都不能解决。
- ortp使用详解2
- C# 导出 excel 复杂格式 html导出
- 免费 Https 证书(Let&#39;s Encrypt)申请与配置
- sublime text (ST)一篇通(安装、配置、扩展、使用)
- flask(一)之路由和视图
- 期货大赛项目|五,表格插件datatatables在MVC中的应用
- django之注册登录
- MMORPG战斗系统随笔(一)、战斗系统流程简介
- 查看Ubuntu的显卡信息
- zabbix 3.2.4 使用详解
- 【leetcode】453. Minimum Moves to Equal Array Elements
- 20175310 《Java程序设计》第5周学习总结