如何在ThingsBoard小部件中创建并使用Angular组件？

官方的小部件开发指南仅覆盖了JavaScript方式的小部件开发，但如果要实现可复用的组件化小部件，可以通过扩展机制开发TypeScript Angular组件，并在自定义小部件中调用，就像内置的「Entities hierarchy」小部件那样——模板中直接使用Angular组件选择器，控制器仅做生命周期方法的委托。以下是完整实现流程：

前置准备 #

• 克隆thingsboard-extensions仓库到本地
• 确保本地环境匹配ThingsBoard主项目的依赖版本：Node.js、Angular CLI、Maven

步骤1：开发Angular组件 #

1. 在extensions的ui-extension/src/app目录下，用Angular CLI生成组件：

ng generate component custom-widget

2. 修改组件代码，注入WidgetContext以对接ThingsBoard的小部件API，实现核心逻辑：

import { Component, Input, OnDestroy } from '@angular/core';
import { WidgetContext } from '@thingsboard/ui-components';

@Component({
  selector: 'tb-custom-widget', // 自定义组件选择器，需唯一
  templateUrl: './custom-widget.component.html',
  styleUrls: ['./custom-widget.component.scss']
})
export class CustomWidgetComponent implements OnDestroy {
  @Input() ctx: WidgetContext; // 接收小部件上下文参数

  constructor() {}

  // 自定义数据更新方法，供小部件控制器调用
  onDataUpdated(): void {
    const latestData = this.ctx.data;
    // 此处编写你的数据处理、渲染逻辑
  }

  ngOnDestroy(): void {
    // 清理定时器、订阅等资源
  }
}

3. 将组件添加到UiExtensionModule的declarations和exports数组中，确保扩展能识别该组件。

步骤2：编译并打包扩展 #

在extensions根目录执行Maven命令，生成可部署的扩展包：

mvn clean install -DskipTests

打包完成后，在ui-extension/target目录下会生成tb-ui-extension-{版本号}.jar文件。

步骤3：部署扩展到ThingsBoard #

1. 将生成的jar包复制到ThingsBoard的extensions目录（默认路径为${TB_HOME}/extensions，源码运行时为application/src/main/resources/extensions）
2. 重启ThingsBoard服务，让扩展模块加载生效。

步骤4：创建自定义小部件 #

1. 登录ThingsBoard控制台，进入「小部件库」，新建自定义小部件
2. 模板配置：直接使用你的Angular组件选择器，并传入ctx参数：

<tb-custom-widget [ctx]="ctx"></tb-custom-widget>

3. 控制器配置：实现Widget API的生命周期方法，将逻辑委托给Angular组件：

self.onInit = function() {
    // 获取组件实例，绑定到scope供后续调用
    self.ctx.$scope.customWidget = self.ctx.$element.find('tb-custom-widget').controller('tbCustomWidget');
}

self.onDataUpdated = function() {
    // 触发组件的数据更新逻辑
    self.ctx.$scope.customWidget.onDataUpdated();
}

self.typeParameters = function() {
    return {
        dataKeysOptional: false // 根据组件需求配置是否必填数据键
    };
}

self.actionSources = function() {
    return {
        // 自定义动作源，供其他小部件触发
        'customEvent': {
            name: 'widget-action.custom-event',
            multiple: false
        }
    };
}

self.onDestroy = function() {
    // 清理资源
}

4. 保存小部件后，即可在仪表盘中添加并使用该自定义小部件。

关键注意事项 #

• 必须确保Angular组件的版本与ThingsBoard主项目完全一致，避免兼容性错误
• 组件中使用的第三方依赖需在extensions的package.json中声明，或复用ThingsBoard全局提供的依赖
• 调试阶段可使用ng serve启动extensions的开发服务器，配合本地ThingsBoard实例进行热更新调试
• 组件的输入输出需与Widget API的生命周期对齐，ctx参数是获取小部件上下文、数据、配置的核心入口

内容的提问来源于stack exchange，提问作者DurandA