ThingsBoard教程（十五）：部件库的点击事件

2023-04-29 00:00:13

前言

各位读者好，截止目前，ThingsBoard系列文章已经做了十篇，分别是

ThingsBoard教程（一）：ThingBoard介绍及安装 ThingsBoard教程（二）：租户，租户配置，部件组模块的使用 ThingsBoard教程（三）：系统设置模块的使用 ThingsBoard教程（四）：规则链简介与操作 ThingsBoard教程（五）：客户，资产管理 ThingsBoard教程（六）：设备管理 ThingsBoard教程（七）：模拟设备遥测 ThingsBoard教程（八）：自定义UI ThingsBoard教程（九）：前端架构分析 ThingsBoard教程（十）：前端初级定制化 ThingsBoard教程（十一）：部件库的入门知识 ThingsBoard教程（十二）：部件库中使用echarts ThingsBoard教程（十三）：部件的基本API解释 ThingsBoard教程（十四）：部件库基本JS函数API解释，及变量的使用，显示

上一篇我们简单介绍了tb的一些基本内置函数，通过这些函数我们可以监听仪表盘的缩放，订阅数据的改变，以及是否是手机模式下预览。本篇文章将进入更加具体的实践，对这个些部件库的api做更加详细的解释，在制作物联网仪表盘中的实践。

本篇文章我们就来演示一下部件库中的事件操作，假如我们的部件上有一个按钮，或者一个div,我们想让这个按钮在点击时，触发一个我们定义的函数。下面我们就来演示如何做这样一个基本的操作。

创建静态部件

我们创建一个静态部件， html中写入

<div fxFlex fxLayout=”column” style=”height: 100%;” fxLayoutAlign=”space-around stretch”> <h3 style=”text-align: center;”>My first static widget. </h3> <button mat-raised-button color=”primary” (click)=”showAlert()”>Click me</button> <p (click)=”showAlert()”>232323</p> </div>

js中写入

self.onInit = function() { self.ctx.$scope.showAlert = function() { var alertContent = self.ctx.settings.alertContent; if (!alertContent) { alertContent = “Content derived from alertContent property of widget settings.”; } window.alert(alertContent); }; }

在设置模式下写入

{ “schema”: { “type”: “object”, “title”: “Settings”, “properties”: { “alertContent”: { “title”: “Alert content”, “type”: “string”, “default”: “Content derived from alertContent property of widget settings.” } } }, “form”: [ “alertContent” ] }

写入后报错，页面大概显示这个样子。 ThingsBoard教程（十五）：部件库的点击事件

这里来解释一下 js的部分，在self.onInit() 部件的初始化函数中，我们定义了一个函数，self.ctx.$scope.showAlert = function() {} 这个函数是定义在 self.ctx.$scope 对象下的，这个地方不能错。此外，我们需要将我们的函数绑定到部件的dom元素上，是怎样绑定的? 在angular中使用 (click)=”showAlert()” 来绑定一个 showAlert() 的函数。

你可以在按钮上添加click事件，也可以在p标签，div标签上添加。同样生效。

在函数 showAlert() 中我们使用 self.ctx.settings 获取了我们的部件配置数据。即下面这一块json数据 ThingsBoard教程（十五）：部件库的点击事件1