在Angular开发中，ng2-query-builder是一个流行的npm包，它可以帮助开发者快速构建出查询条件构建器，涵盖广泛的查询需求。本篇文章将详细介绍ng2-query-builder的基本使用和一些高级功能，以及如何自定义查询条件。
基本使用
首先，你需要在你的Angular项目中安装ng2-query-builder:
npm install ng2-query-builder
接着，在你的app.module.ts文件中，引入NgQueryBuilderModule:
-- -------------------- ---- -------
------ - -------------------- - ---- --------------------
-----------
------------- -
------------
--
-------- -
--------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在你的组件中，添加以下代码：
<query-builder [queryFields]="queryFields" [(ngModel)]="query"></query-builder>
这里的queryFields是一个数组，代表了我们要查询的字段。例如，一个文章查询的queryFields可以长这样：
queryFields = [
{ name: 'Title', key: 'title', type: 'string' },
{ name: 'Published Date', key: 'publishedDate', type: 'date' },
{ name: 'Author', key: 'authorName', type: 'string' },
{ name: 'Category', key: 'category', type: 'custom', options: this.categories }
];在这个queryFields中，name代表了要显示的字段名，key代表了实际的数据字段名，type代表了这个字段的格式（string, date, boolean等等）。如果查询条件有一些特殊需求，比如需要从服务器获取分类列表，我们可以定义一个自定义的类型为custom，使用options来表示该字段的选项。
这样，在你的组件中，你可以轻松的把queryFields传给query-builder组件，完成一个简单的查询条件的构造器。
接下来，我们将对queryFields里的字段进行操作，来生成我们想要的查询条件。
常见查询操作
ng2-query-builder支持以下常见的查询操作：
等于
在queryFields中添加一项字段：
{ name: 'Title', key: 'title', type: 'string' },则用户可以通过选择Title字段并输入一个字符串查询具有该名字的对象。
大于或小于
在queryFields中添加以下两项字段：
{ name: 'Rating', key: 'rating', type: 'number' },
{ name: 'Price', key: 'price', type: 'number' },用户可以通过选择Rating或Price字段并输入一个数字来查询满足相应条件的对象。
日期范围查询
在queryFields中添加以下字段：
{ name: 'Published Date', key: 'publishedDate', type: 'date' },则用户可以通过选择Published Date字段并选择具体的日期来查询相应的数据。
布尔查询
在queryFields中添加以下字段：
{ name: 'Available', key: 'available', type: 'boolean' },则用户可以通过选择Available并选择True或False来查询相应的数据。
自定义查询
假设我们要对一个类别进行查询，这个类别是从服务器获取的。我们可以自定义一个查询类型。
在queryFields中添加以下字段：
{ name: 'Category', key: 'category', type: 'custom', options: this.categories },这里的options是从服务器获取到的分类列表。这个option是一个数组，每项包含两个值，value代表了实际的条件值，label代表了在查询时显示的值。
自定义查询条件
有时，我们可能需要更灵活、更自由的查询条件。ng2-query-builder提供了许多可自定义的选项以满足这种需求。
要开始自定义查询条件，我们需要在queryFields中添加以下字段之一：
{ name: 'Text', key: 'text', type: 'string' },
{ name: 'Value List', key: 'values', type: 'list', options: this.options },
{ name: 'Combo Box', key: 'combo', type: 'combo', options: this.options },
{ name: 'Date Range', key: 'daterange', type: 'daterange' },这里，我们将演示如何使用文本查询和复选框。
-- -------------------- ---- ------- ----------- - - - ----- -------- ---- -------- ----- -------- -- - ----- ----------- ---- ----------- ----- --------- -------- --------------- -- - ----- ----------- ---- ----------- ----- -------- -- - ----- ----------- ---- ----------- ----- --------- -- -- ---------- - ----- ----------- ---- ------- ----- --------- ---------- ------------ -------- -- -- --------- - ----- ------- ---- ------- ----- ------- -------- ---------- ---------- ------ -- --
在这个queryFields中，我们添加了两个自定义类型。text类型代表文本查询，list类型代表复选框查询。这里的options数组包含了相应的选项，operators数组包含了该查询类型支持的操作，可以自己定义。
在组件中，我们需要添加以下代码：
<query-builder [queryFields]="queryFields" [(ngModel)]="query" [customOperators]="customOperators" [customTemplates]="customTemplates"> </query-builder>
这里的customOperators和customTemplates是可选的，如果你需要自定义模板或运算符，则需要提供这些内容。
上面的代码中，query代表了当前的查询条件。我们在组件中添加了一个变量query来表示查询条件。
示例代码
我们以一个博客为例，来说明如何使用ng2-query-builder。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------------ - ---- --------------------
------------
--------- -------------------
--------- -
-------------- ---------------------- -------------------
-----------------------------------
-----------------------------------
-----------------
-----------------
--
---------- --------------------------------
--
------ ----- --------------------- -
------ --- - - ------------ ------ -------- -- --
------- ------------------ - -
---------------- ------
---------- -
- ----- ------- ------ --- ----- --
- ----- ---------- ------ --- --- ----- --
- ----- ----- ------ ---- --
- ----- -------- ------ ---- --- --
- ----- ----------- ------ ----- ----- -
--
------- -
------ - ----- -------- ----- -------- --
--------- - ----- ----------- ----- --------- -------- --------------- --
----- - ----- ------- ----- --------- -------- --------- --
----------- - ----- -------- ---- ----- ------ -
-
--
------- ----- - -
- ----- -------- ---- -------- ----- -------- --
- ----- ----------- ---- ----------- ----- --------- -------- --------------- --
- ----- ------- ---- ------- ----- --------- -------- --------- --
- ----- -------- ---- ---- ------------- ----- ------ -
--
----------- ----- - -
- ------ ------------- ------ --- --
- ------ -------- ------ --- --
---
--
----- ----- - -
- ------ ---------- ------ --- --
- ------ ------------- ------ --- --
---
--
--------------- - -
--- - ----- ----- ------ --------- ---- --
------ - ----- -------- ------ --------- ----- -
--
--------------- - -
--- ------------
------ --------------
--
-自定义运算符和模板通常是在处理high-dimension查询时使用的。我们不仅可以自行设计操作符，还能够调整相应的query-builder的样式。
总结
ng2-query-builder是一个非常强大的Angular组件，帮助我们快速搭建查询条件构建器。我们可以根据需求添加不同类型的查询字段，也可以自定义字段类型、运算符等等。
希望这篇文章能帮助你开始使用ng2-query-builder，并进一步探索其更多高级用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671881e8991b448e36c6