实体筛选器

每个 CRUD 页面都包含一些用于筛选列表数据的输入控件。其中一些输入控件在所有实体中都是通用的，例如 搜索 框。此外，每个实体根据其字段拥有自己的高级筛选器。为了减少在每个 CRUD 页面上编写的代码量，ABP Commercial 的 Angular UI 引入了一种名为 abp-advanced-entity-filters 的新型组件。

设置

这些组件位于 @volo/abp.commercial.ng.ui 包中，该包已包含在 ABP 模板中。因此，只要您的项目是基于这些模板创建的，并且未删除该包，您就可以使用实体筛选器组件。

高级实体筛选器由多个组件组成：AdvancedEntityFiltersComponent、AdvancedEntityFiltersToggleComponent、AdvancedEntityFiltersFormComponent 和 AdvancedEntityFiltersAboveSearchComponent。您可以通过将它们导入到独立的组件中直接使用这些组件。

使用方法

让我们以 Identity 模块中的 用户 页面为例。

如截图所示，abp-advanced-entity-filters 通常包含两个部分：一个实体筛选器（在实体之间通用），即 abp-entity-filter，以及封装在 abp-advanced-entity-filters-form 组件中的实体特定筛选器。您需要将 AdvancedEntityFiltersComponent 和 AdvancedEntityFiltersFormComponent 添加到组件的导入数组中才能使用它们。

users.component.html

<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity">
  <abp-advanced-entity-filters-form>
    <form #filterForm (keyup.enter)="list.get()">
      <div class="row">
        <!-- 表单元素已省略 -->

        <div class="col-12 col-sm-auto align-self-end mb-3">
          <div class="row">
            <div class="col-6 col-sm-auto d-grid">
              <button
                type="button"
                class="btn btn-outline-primary"
                (click)="clearFilters()"
              >
                <span>{{ 'AbpUi::Clear' | abpLocalization }}</span>
              </button>
            </div>
            <div class="col-6 col-sm-auto d-grid">
              <button
                type="button"
                class="btn btn-primary"
                (click)="list.get()"
              >
                <span>{{ 'AbpUi::Refresh' | abpLocalization }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </abp-advanced-entity-filters-form>
</abp-advanced-entity-filters>

abp-advanced-entity-filters 已经包含了 abp-entity-filter 组件，因此您无需额外传递它。但是，abp-entity-filter 组件需要一个 ListService 的实例，该实例通常存储在页面的 list 字段中。您还可以通过 entityFilterPlaceholder 输入属性更改组件的占位符文本，该属性会传递给 abpLocalization 管道以使用翻译后的文本。默认值为 'AbpUi::PagerSearch'。

例如：

<abp-advanced-entity-filters
  [list]="list"
  entityFilterPlaceholder="AbpUi::PagerSearch"
>
  <!-- ... -->
</abp-advanced-entity-filters>

输入属性

• list：ListService 的实例
• entityFilterPlaceholder：abp-entity-filter 组件的占位符文本。默认值：'AbpUi::PagerSearch'
• localizationSourceName：当前页面的本地化源。例如：AbpIdentity

内部组件

一些实体较为简单，除了 abp-entity-filter 外不需要任何其他筛选器。在这种情况下，您可以简单地使用 abp-advanced-entity-filters，中间无需添加任何内容。

例如：

让我们从 用户 页面中移除 form

<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity" />

如果您的组件需要其他筛选器，您可以在 abp-advanced-entity-filters-form 组件中传递您自己的 form。这将呈现您的表单以及一个用于显示和隐藏表单的切换按钮（abp-advanced-entity-filters-toggle）。

例如：

<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity">
  <abp-advanced-entity-filters-form>
    <form>
      <!-- 内容为简洁起见已省略 -->
    </form>
  </abp-advanced-entity-filters-form>
</abp-advanced-entity-filters>

最后但同样重要的是，如果您需要在 abp-entity-filter 组件上方呈现某些内容，可以使用 abp-advanced-entity-filters-above-search。此时，您需要将 AdvancedEntityFiltersComponent、AdvancedEntityFiltersFormComponent 和 AdvancedEntityFiltersAboveSearchComponent 添加到组件的导入数组中。

例如：

<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity">
  <abp-advanced-entity-filters-above-search>
    <h3>实体筛选器上方的自定义内容</h3>
  </abp-advanced-entity-filters-above-search>

  <abp-advanced-entity-filters-form>
    <form>
      <!-- 内容为简洁起见已省略 -->
    </form>
  </abp-advanced-entity-filters-form>
</abp-advanced-entity-filters>