最新要闻
- 许婷律师联系方式_许婷
- 内地5月26日上映!《小美人鱼》新预告:女主被鲨鱼追杀-天天快资讯
- 给AI小姐姐留着 西数16TB硬盘到手1549元(非SMR)
- 5代都玩腻了 5月17日或公布《GTA6》新消息 期待吗? 当前热文
- 环球观热点:彻底放弃Win7!U盘软件Rufus发布4.0版本
- 视效大片!《变形金刚7:超能勇士崛起》确认引进内地:预计6月上映
- 四大会计师事务所排名百科(四大会计师事务所排名)
- 世界即时:台湾拚非核疯绿电 企业买高中培养风电人才
- 女子淄博买切糕2种口味称重仅6元火了!五一客流量爆满:喊话推荐其他山东城市
- 中国广电合约机明天上市:iPhone 14最低2586元 全面支持5G|最资讯
- 并非永久关停!天涯社区官方:会回来的 天天百事通
- 环球滚动:一加功不可没!OPPO成为中国手机市场Q1安卓销量第一名
- 速看:杭州、合肥土拍又“火爆”了
- 患者反复腹痛7年!南华医院一招肠菌移植显奇效-视讯
- 湖南工学院与衡阳师范学院联合举办2023年“一校一书”阅读推广暨读书节活动开幕式 焦点消息
- 售价接近110万 网友绘制比亚迪仰望U8改装版:高低也得整一辆|天天热消息
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
ThingsBoard 前端项目内置部件开发
前言
ThingsBoard 是目前 Github 上最流行的开源物联网平台(12.8k Star),可以实现物联网项目的快速开发、管理和扩展, 是中小微企业物联网平台的不二之选。
本文介绍如何在 ThingsBoard 前端项目中开发内置的菜单导航部件。
(资料图片仅供参考)
内置相关部件
TB(ThingsBoard简称,下同)系统前端内置了三十多种部件,如日期范围选择部件:
对应代码存放在前端项目文件中:thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\date-range-navigator
。
TB 后台指定了十四种部件包(一类部件合集,不能再添加部件),由后台接口返回代码存储位置:thingsboard\application\src\main\data\json\system\widget_bundles
。
对应 TB 前端部件包界面列表:
在仪表板中的部件,编辑中的高级选项会对应部件的 setting
文件,如日期范围选择组件的高级内容对应文件:thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\settings\date\date-range-navigator-widget-settings.component.ts
。
当然本篇不会涉及部件高级设置功能,后续可能会单独出一篇相关文章。
部件实现方案
我们先观察下日期范围部件。
可以看到 TB 前端内置了 tb-date-range-navigator-widget
组件,直接通过调用组件选择器实现了部件的功能,所以我们开发菜单导航部件也需要先开发一个对应的组件。
菜单导航组件
在选择菜单导航组件的的选择上我掉坑里了- -,选用的 layui 的菜单导航,引入到 TB 前端项目中发现样式没问题,但是点击没有展开收起效果,只能放弃。当然这不代表 layui 不好,相反 layui 是很用心的一款前端组件,我正在开发的博客主题用的就是 layui。
再后来选择了 Ant Design 组件库,对应 Angular 实现的版本叫 ng-zorro-antd
,其中的菜单导航组件链接:https://ng.ant.design/version/12.1.x/components/menu/zh。
Angular 引入 Ant
因 TB 前端项目使用的是 Angular v12 的版本,所以对应的 ng-zorro-antd
要选择 v12.1.1 版本,过高的版本安装后会报错,安装命令:
yarn add ng-zorro-antd@12.1.1 --save
在 angular.json 文件中引入 css 样式和 icons 资源:
"styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ],"assets": [ { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ],
创建内置部件
创建菜单导航部件,我们在 \thingsboard\ui-ngx\src\app\modules\home\components\widget\lib\
目录下创建 menu
的相关文件:
|menu| -- menu.component.html| -- menu.component.scss| -- menu.component.ts| -- menu.model.ts
menu.component.html
文件中使用 ng-zorro-antd
菜单导航示例。
-
-
- Option 1
- Option 2
-
- Option 3
- Option 4
-
- Option 5
- Option 6
-
- Option 7
- Option 8
-
- Option 9
- Option 10
-
- Option 11
- Option 12
- Option 13
menu.component.ts
文件中创建 tb-menu-widget
组件选择器。
import { Component } from "@angular/core";import { WidgetContext } from "@home/models/widget-component.models";@Component({ selector: "tb-menu-widget", templateUrl: "./menu.component.html", styleUrls: ["./menu.component.scss"]})export class MenuComponent { ctx: WidgetContext; constructor() { }}
menu.models.ts
文件中声明导出组件 MenuComponent
, 并引入 ng-zorro-antd
的菜单和图标模块 NzMenuModule
和 NzIconModule
。
import { NgModule } from "@angular/core";import { MenuComponent } from "@home/components/widget/lib/menu/menu.component";import { NzMenuModule } from "ng-zorro-antd/menu";import { NzIconModule } from "ng-zorro-antd/icon";@NgModule({ declarations: [ MenuComponent ], imports: [ NzMenuModule, NzIconModule ], exports: [ MenuComponent ]})export class MenuModule {}
注:按照官网方式:https://ng.ant.design/version/12.1.x/docs/getting-started/zh#手动安装,在根模块 app.module.ts
中引入 ng-zorro-antd
组件模块即可生效,但在 TB 项目中并未生效,经测试,只有在具体的某个组件中引入 ng-zorro-antd
组件模块才会生效。
最后记得要在 widget-components.module.ts
文件中引入和导出 MenuModule
模块才能生效。
import { MenuModule } from "@home/components/widget/lib/menu/menu.models";@NgModule({ imports: [ MenuModule ], exports: [ MenuModule ]})
最后在 TB 网站部件包添加部件,通过调用组件 tb-menu-widget
即可成功引入 ng-zooro-antd
组件库的菜单导航,Nice~
结语
由于 TB 的受众面很小,所以如果你没研究过 TB 看不懂这篇文章也是很正常的- -,跳过就好,TB 的相关文章更多的是作为本人的一个工作知识记录,如果能对一小部分人有所帮助那就更好啦~
好啦,以上就是 ThingsBoard 前端项目内置部件开发的全部内容,希望对你有所帮助,如有问题可通过我的博客 https://echeverra.cn 或微信公众号 echeverra 联系我。
你学“废”了么?
(完)
文章首发于我的博客 https://echeverra.cn/tb2,原创文章,转载请注明出处。
欢迎关注我的微信公众号 echeverra,一起学习进步!不定时会有资源和福利相送哦!
关键词:
-
天天关注:【MAUI Blazor踩坑日记】3.Windows标题栏自定义颜色,运行时改变颜色
目录修改默认颜色修改运行时颜色效果图MAUI中Windows默认的标题栏颜色是灰色的,有一点丑。如果去掉默认的
来源: -
今日热门!iOS描述文件(.mobileprovision)一键申请
转载:IOS描述文件制作教程iOS描述文件( mobileprovision)一键申请在主界面上点击描述文件按钮。编辑切换
来源: 天天关注:【MAUI Blazor踩坑日记】3.Windows标题栏自定义颜色,运行时改变颜色
ThingsBoard 前端项目内置部件开发
记录-Vue移动端日历设计与实现
今日热门!iOS描述文件(.mobileprovision)一键申请
vue-router3.x和vue-router4.x相互影响的问题记录
许婷律师联系方式_许婷
解锁五一新玩法——第三站:黑龙江·森林氧吧
内地5月26日上映!《小美人鱼》新预告:女主被鲨鱼追杀-天天快资讯
给AI小姐姐留着 西数16TB硬盘到手1549元(非SMR)
5代都玩腻了 5月17日或公布《GTA6》新消息 期待吗? 当前热文
环球观热点:彻底放弃Win7!U盘软件Rufus发布4.0版本
视效大片!《变形金刚7:超能勇士崛起》确认引进内地:预计6月上映
四大会计师事务所排名百科(四大会计师事务所排名)
Java中关于String类以及字符串拼接的问题 世界新动态
低代码是开发的未来,还是只能解决边角问题的鸡肋? 全球热点评
环球播报:有奖征文丨【玩转Cloud Studio】第二季来啦!
ReactNative 桥接原生原子组件(一) 今日热闻
Java程序部署成Windows服务-全球独家
世界即时:台湾拚非核疯绿电 企业买高中培养风电人才
天天观速讯丨【财经分析 】钢厂纷纷减产,钢价能否止跌?
女子淄博买切糕2种口味称重仅6元火了!五一客流量爆满:喊话推荐其他山东城市
中国广电合约机明天上市:iPhone 14最低2586元 全面支持5G|最资讯
并非永久关停!天涯社区官方:会回来的 天天百事通
环球滚动:一加功不可没!OPPO成为中国手机市场Q1安卓销量第一名
速看:杭州、合肥土拍又“火爆”了
患者反复腹痛7年!南华医院一招肠菌移植显奇效-视讯
读书笔记丨远程服务调用和RESTful,如何分析和抉择?
国内公路编码规则
收评:创业板指收涨1.54% 新能源赛道大幅反弹
湖南工学院与衡阳师范学院联合举办2023年“一校一书”阅读推广暨读书节活动开幕式 焦点消息
售价接近110万 网友绘制比亚迪仰望U8改装版:高低也得整一辆|天天热消息
微头条丨安卓之光!小米连续做了4代Ultra:米粉评价“方向对了”
要闻:研究表明咖啡+茶效果更佳:可降低死亡风险 但要适量
热点聚焦:买硬座票跑卧铺睡男子引发热议!他还教育乘务员:提高服务意识
主摄硬件无升级!三星Galaxy S24 Ultra将依靠软件优化拍摄质量
楚天科技:一次性耗材领域已完成质量体系认证,目前已有销售订单
MySQL 安装及配置 当前快看
四级英语冲刺高频500词
在毫秒量级上做到“更快”!DataTester 助力飞书提升页面秒开率
[译]在C#中使用IComparable和IComparer接口 每日短讯
(二)asyncio的简单使用,python异步高效处理数据,asyncio.get_event_loop(),loop.run_until_complete(
全球看点:4月26日西南地区乙醇市场行情震荡整理
大范围降雨将重启 暴雨袭击6省:覆盖五一假期 环球即时看
特斯拉Autopilot每917万公里才一起事故:比人驾安全性高773% 世界新动态
旅美大熊猫“丫丫”将于当地4月26日归国:身体健康状态相对平稳
三星Exynos 2400回归!性能爆发 剑指高通骁龙8 Gen3-世界快讯
世界视点!撕掉油腻 三重功效:凯迪克男士洗面奶280g装19.9元
天天观天下!剪窗花的来历和故事_剪窗花的来历
市场监管总局:对明显违法违规的主播和商家要依法严厉处罚-全球最资讯
旅游不怕价格刺客!淘宝上线海淘“外挂”:拍照找同款比价 热点聚焦
烧烤火出圈 淄博致游客的一封信:客流量已超出接待能力-天天微头条
悲痛!一名8岁女孩脸部遇手机爆炸后身亡 官方正调查
接单日记(一):理解浮点数运算的误差
物业业主联手助力孩子圆梦
俞敏洪:猪周期与人生周期相似 坚守最可贵
全球微动态丨寿司店疑现被煮熟蓝环章鱼 店家要求爆料网友删博:市监局已介入
Web3来了!蚂蚁链宣布开源跨链技术:数字资产互联互通
微软将以690亿美元收购动视暴雪:有望于本周获批|当前热闻
全面实行不动产统一登记制,房产税真的要来了? 全球要闻
【环球速看料】从数据库查询权限信息与自定义失败处理
每日观点:【Excel统计分析插件】上海道宁为您提供统计分析、数据可视化和建模软件——Analyse-it
亿级日活业务稳如磐石,华为云CodeArts PerfTest发布
深入思考右值引用
看点:Java中抽象类和接口的区别?
世界即时:宿州:全市采血点无休 库存现缺A型、o型血
传统车企掀桌子!20.89万起的别克E5太香了:累计订单已超8000份 每日焦点
小鹏P7停车礼让 随后看呆:老奶奶5秒跑过斑马线还竖大拇指-世界微速讯
手机创史上最大降幅 回收成香饽饽:“暴利”超乎想象 焦点消息
天天微头条丨年轻人的首台超联接笔记本 华为MateBook D 14开卖 首销购机享福利
五一小长假来了!滴滴宣布发2亿司机补贴:假期出车流水加速
dota如何踢人?dota怎么设置快捷键?
今日视点:4月26日浙江蓝苏氟化工氢氟酸价格暂稳
半成品加工是什么意思?半成品加工需要办什么证件?
nba fmvp是什么意思?fmvp是怎么评出来的?
50米自由泳世界纪录是多少?50米自由泳一二三级运动员标准
诺基亚5320当年多少钱?诺基亚5320手机参数
苹果一体机怎么开机?苹果一体机电脑型号大全列表
诺基亚820怎么连接电脑?诺基亚820手机参数
当前观点:使用pycuda替换字符串,使用cuda替换字符串
python 使用selenium 不开启浏览器
今日热议:C# 获取系统DPI缩放比例以及分辨率大小
TF-GNN踩坑记录(四) 全球报道
CentOS搭建squid正向代理|当前热门
全球即时:据说,有一群AI数字人将在AWE展会觉醒......
增城是哪里的城市?增城旅游必去十大景点
联通iphone合约机划算吗?联通iphone语音信箱怎么关闭?
电信网络模式有哪几种?电信网络模式怎么设置?
【金融街发布】财政部:3月全国发行地方政府债券8900亿元
守住“头顶上的安全”, 长征镇加强房屋高坠隐患排查整治|当前时讯
微信支付支持数字人民币支付了:视频号、小程序可用
【世界新视野】丰田社长体验中国顶级豪车红旗L5:满脸堆笑、不住称赞
99年女子疑过度劳累宿舍猝死 公司:逝者是临时工
280g新疆长绒棉:Caria Knar纯棉T恤29.99元(减110元)
【全球新视野】NVIDIA推出安全“护栏”:限制人工智能“一本正经的胡扯”
22家上市后备企业蓄势待发!永兴经开区优化营商环境促发展-新视野
Java基础之String字符串的底层原理,面试常见问题
当前速读:error: Your local changes to the following files would be overwritten by me
Java8 教程_编程入门自学教程_菜鸟教程-免费教程分享
天天观焦点:兰州高新区重点项目建设实现一季度开门红
中金湖北科投光谷REIT正式获批 全球信息