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

前言

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

上一篇我们简单介绍了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"
    ]
}

写入后报错，页面大概显示这个样子。
在这里插入图片描述

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

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

在函数 showAlert() 中我们使用 self.ctx.settings 获取了我们的部件配置数据。即下面这一块json数据
在这里插入图片描述