Angular Elastic Builder 是一个用于构建 ElasticSearch 查询语句的 Angular 组件。它可以用于您的 Angular 项目，让您能够轻松地创建可视化的查询生成器，直接使用 ElasticSearch 查询语句来查询您的数据。在本文中，我们将介绍如何使用 Angular Elastic Builder 这个 npm 包来构建强大的查询语句，以便更好地查询和分析您的数据。
安装 angular-elastic-builder-tienvx
您可以直接使用 npm 来安装 angular-elastic-builder-tienvx 包：
npm install angular-elastic-builder-tienvx
安装完成后，您可以在项目源码中引用它：
-- -------------------- ---- -------
------ - -------------------- - ---- ---------------------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------- -- -- -------------------- --
--
---------- ---
---------- --------------
--
------ ----- --------- - -基本使用
首先，在您的组件模板文件中添加 ElasticBuilder 组件：
<elastic-builder [schema]="schema" [(query)]="query"></elastic-builder>
其中，schema 是您的表单模型，定义了查询语句的规则。query 则是动态的查询语句对象。您可以定义一些默认的规则：
-- -------------------- ---- -------
------ - --------------------- - ---- ---------------------------------
------------
--------- -----------
--------- ----------------- ----------------- -------------------------------------
--
------ ----- ------------ -
------ - ----------------------
---------------------- -------
---
----- - -----------------------------
-------------------------
---
------------------- ---- ---------------------- - -
-在这个示例中，我们定义了一个表单域 test，并在查询语句中添加一个默认的查询字符串规则 queryString。这里的查询语句是一个空字符串，您可以通过从 UI 中构建一个查询语句来替换它。
进阶使用
Angular Elastic Builder 还提供了一些进阶的使用方式，可以让您更加方便地使用它。例如，您可以创建一个通用的查询组件：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - --------------------- - ---- ---------------------------------
------------
--------- -----------------
--------- ----------------- ----------------- --------------------------------------
--
------ ----- ---------------------- -
-------- -------- -
----- -------- ----
--
------- ----
------ ----
------------------- ---- ---------------------- --
---------- -
-- ------- ---------------------- --- ------------ -
----- --- ----------------
-
----------- - ----------------------
----------------------------------- -------------------------
---
---------- - -----------------------------
------------------------
---
-
-在这个示例中，我们使用 @Input 注解来绑定一个包含字段信息的选项对象。在 ngOnInit 生命周期钩子函数中，我们将选项对象中指定的字段信息加入到了表单域中，并创建了一个默认查询语句对象。
使用时，只需要按照以下方式引入查询组件即可：
<elastic-search [options]="{
fields: ['test'],
fieldsTitle: '搜索 Test'
}"
></elastic-search>以上就是 Angular Elastic Builder 的基本使用和进阶使用方式的介绍，您也可以通过 “Elastic Builder API” 文档来深入了解更多 API。希望能够对您有所帮助，让您更好地查询和分析数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b781e8991b448d4c01