前言
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.tsmenu.component.html 文件中应用 ng-zorro-antd 菜单导航示例。
<ul nz-menu nzMode="inline"> <li nz-submenu nzTitle="Navigation One" nzIcon="mail" nzOpen> <ul> <li nz-menu-group nzTitle="Item 1"> <ul> <li nz-menu-item nzSelected>Option 1</li> <li nz-menu-item>Option 2</li> </ul> </li> <li nz-menu-group nzTitle="Item 2"> <ul> <li nz-menu-item>Option 3</li> <li nz-menu-item>Option 4</li> </ul> </li> </ul> </li> <li nz-submenu nzTitle="Navigation Two" nzIcon="appstore"> <ul> <li nz-menu-item>Option 5</li> <li nz-menu-item>Option 6</li> <li nz-submenu nzTitle="Submenu"> <ul> <li nz-menu-item>Option 7</li> <li nz-menu-item>Option 8</li> <li nz-submenu nzTitle="Submenu"> <ul> <li nz-menu-item>Option 9</li> <li nz-menu-item>Option 10</li> </ul> </li> </ul> </li> </ul> </li> <li nz-submenu nzTitle="Navigation Three" nzIcon="setting"> <ul> <li nz-menu-item>Option 11</li> <li nz-menu-item>Option 12</li> <li nz-menu-item>Option 13</li> </ul> </li></ul>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，一起学习提高！不定时会有资源和福利相送哦！