[发明专利]一种Angular内SQL在线编辑器的实现方法

权利要求书

1.一种Angular内SQL在线编辑器的实现方法，其特征在于，包括以下步骤：

(1)通过Angular组件的形式对接CodeMirror，在Angular组件内完成对CodeMirror的封装，转换成Type Script语言接口；

(2)需要在Angular工程内实现SQL在线编辑器时，直接调用上述Angular组件即可。

2.根据权利要求1所述的Angular内SQL在线编辑器的实现方法，其特征在于：所述步骤(1)中，在Angular组件中的package文件中引入CodeMirror，在style.css中引入CodeMirror的lib下的codemirror.css和codemirror/addon/hint路径下的show-hint.css，即可实现编辑器中SQL的基本样式和自动补全的样式。

3.根据权利要求2所述的Angular内SQL在线编辑器的实现方法，其特征在于：在Angular组件中引入CodeMirror的show-hint.js插件和SQL-hint.js插件，即可实现SQL关键词的自动提示功能。

4.根据权利要求2所述的Angular内SQL在线编辑器的实现方法，其特征在于：Angular前端获取到数据库表名相关数据时，赋值给CodeMirror的hintOptions下的tables属性，即可实现数据库表名的自动补全功能。

5.根据权利要求1所述的Angular内SQL在线编辑器的实现方法，其特征在于：所述步骤(1)中，通过声明一个Angular组件完成对CodeMirror的封装，并暴露出CodeMirror的option配置和是否自动聚焦属性绑定，鼠标活动事件监听绑定，文本双向绑定。

6.根据权利要求6所述的Angular内SQL在线编辑器的实现方法，其特征在于：引入Angular组件后，配置是否自动聚焦属性，并为组件属性输入设定的布尔值，即可实现对编辑器是否自动聚焦个性化配置。

7.根据权利要求6所述的Angular内SQL在线编辑器的实现方法，其特征在于：引入Angular组件后，通过监听鼠标光标位置，即可实时在编辑器下方获取光标所在的位置，实现编辑器显示行号和列号的功能。

8.根据权利要求6所述的Angular内SQL在线编辑器的实现方法，其特征在于：结合CodeMirror的原有插件和SQL-formatter插件，即可实现SQL文本的格式化显示的功能；利用CodeMirror的快捷键绑定，调用Angular组件对SQL文本内容进行格式化，由于SQL文本内容绑定在ngModel属性，利用Angular的ngModel双向绑定特性，即可实现格式化之后的SQL文本在界面的展示。

9.根据权利要求1所述的Angular内SQL在线编辑器的实现方法，其特征在于：所述步骤(2)中，编程人员只关注Angular组件本身暴露出来的属性绑定，不需要关注CodeMirror如何在Angular里调用。