Angular tab标签页动态加载组件具体实现
来源:互联网 发布:wps数据不能求和 编辑:程序博客网 时间:2024/06/05 07:05
效果图,左侧导航栏点击连接,右侧出现tab 标签页并动态显示不同的组件内容。为了演示效果更,后面的statistic.data1-5的内容是相同的,因为使用了相同的Component。
按钮操作
应业务需要,所以需要用到这种动态加载组件的tab,这种方式其实完全没有用到angular 的路由,只是在一个宿主页面上加载了很多的Component。
F12 看到这些tab的具体内容,通过设置ant-tabs-tabpane-active 的display:block 来显示tab 选中的内容
angular 官方文档上对象动态加载组件也有专门的章节说明,可以参照官网文档:https://angular.cn/guide/dynamic-component-loader
demo代码已上传到github,需要参考的朋友移步https://github.com/zjinger/tab-dynamic-componet
这种方式和应该和angular 的单页面原则是相违背的,这里一个主的Component包含了太多的其他Component,好处可能就是切换的时候已经打开的Component不需要再重新去渲染初始化,速度就比较快,导致的结果就是一个页面的东西太多,如果tab标签很多的话页面元素就是非常多了,不知道对性能有么有影响。
打开f12 可以看到具体的对应的Component
阅读全文
0 0
- Angular tab标签页动态加载组件具体实现
- vue 动态加载tab选项卡组件
- angular实现页面数据动态加载
- Angular实现tab切换
- Angular学习:模块和组件的动态加载
- tab标签切换页实现
- angular 动态组件
- [Android] 快速实现一个可切换Tab标签页的组件
- angular使用requirejs/ui-router/angularAMD实现动态加载模块
- html css js 实现Tab标签页
- 微信小程序实现滑动tab标签页
- 基于Bootstrap的标签页组件bootstrap-tab使用说明
- Tab标签实现
- bootstrap:动态添加tab标签
- 【Angular】——tab页
- angular实现的面板组件
- React Native 系列(九) -- Tab标签组件
- ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
- 设计模式:代理模式
- Https 建立安全连接的过程(SSL原理)
- laravel-admin的图片删除
- 腾讯云推荐系统介绍--百亿级通用推荐系统实践
- 分类之WASC
- Angular tab标签页动态加载组件具体实现
- Java 常见集合
- ssm+shiro框架的详细配置
- Hive集群安装
- thyemleaf相关语法
- servlet概述
- 创建一个类Python
- spring+springMVC+mybatis整合
- 修改mysql数据库密码及服务中的执行文件路径