ThingsBoard ui-ngx 组件开发指南：组件目录在哪、怎么改、常见坑

ThingsBoard ui-ngx 组件开发指南组件目录在哪、怎么改、常见坑【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard最近有人在群里问给设备列表页加一个自定义勾选框该从哪下手翻一圈代码就会发现ThingsBoard 这套 IoT 平台的前端是标准的 Angular 工程所有界面都长在 ui-ngx 目录里组件开发指南基本就是找到 shared 组件库、注册进模块这两件事。它到底是干什么的一句话ThingsBoard 是开源 IoT 平台管设备、收数据、做可视化ui-ngx 就是它管理界面那半边天。你如果是接手这个仓库的前端或者想给平台加自定义组件90% 的时间会待在 ui-ngx 里。两个位置先记住ui-ngx/src/app/shared/共享组件、指令、样式令牌ui-ngx/src/app/modules/home/登录后看到的所有业务页面目录地图长什么样按职责分四个地方各管一摊不用记全知道去哪翻就行src/app/core/认证、HTTP 服务、全局状态属于地基平时少动src/app/shared/components/复用组件库从勾选框到表格到弹窗都在这里src/app/modules/业务模块home 是主界面dashboard 和 login 相对独立src/styles.scsssrc/theme.scsssrc/scss/全局样式入口和主题变量三步把前端跑起来最省事的路径就是这三条命令git clone https://gitcode.com/GitHub_Trending/th/thingsboard cd thingsboard/ui-ngx yarn install然后yarn start起本地服务。工具上 VS Code 装个 Angular Language Service 就够了不装也能干。有一个前提别忽略前端只是壳登录态和页面数据全由 Java 后端提供proxy.conf.js 里写死了localhost:8080。所以要么先按 docker/ 里的 compose 文件把后端拉起来要么自己改转发地址否则起完就是一个转圈的登录页。核心用法组件从哪来新组件怎么注册先说最省事的——直接抄现成的。所有共享组件由 shared.module.ts 统一exports模板里写tb-checkbox、tb-dialog这类选择器就能用。注意一个事实改任何一个 shared 组件全平台所有页面同时生效所以动它之前想清楚影响面。要加自己的组件流程是生成 注册ng generate component shared/components/my-widgetComponent({ selector: tb-my-widget, templateUrl: ./my-widget.component.html, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false })生成后把类名加进shared.module.ts的declarations跨模块用则同步加进exports只在当前业务模块内的组件注册到该模块自己的.module.ts就行。表单类组件记得实现ControlValueAccessor参照 tb-checkbox.component.ts 的写法。改之前先知道的几个坑按踩过的频率排序OnPush 不是默认开的。原因仓库里只有 icon、面包屑这类高频渲染组件配了changeDetection: ChangeDetectionStrategy.OnPush。做法新组件默认不加也行但列表、图表容器建议加上。全局 hack 样式会炸。原因theme.scss里的变量被所有组件引用直接覆写等于动了地基。做法样式覆盖写在组件自己的.scss里。yarn install之后补丁是自动打的。原因patches/下的第三方库补丁靠prepare脚本应用跳过或换 npm 会导致行为不一致。做法升级依赖前先把补丁清单过一遍。找不到.spec.ts是正常的。原因前端测试覆盖很薄仓库里只有零星几个 spec 文件。做法改完页面手动回归一遍别指望测试网兜底。CLI 默认生成的 standalone 组件插不进来。原因这个老工程走的是 NgModule 体系standalone: true的组件注册方式不同。做法生成后把standalone: false补上再走模块注册。延伸资料README.md平台整体介绍和后端运行方式ui-ngx/src/app/shared/shared.module.ts共享组件注册总表ui-ngx/src/theme.scss主题变量定义ui-ngx/src/assets/help/en_US/官方内置帮助文档读完这几处改组件、查样式、对行为的线索就齐了。【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考