跳到主要内容

Query Builder — Angular

@aiao/rxdb-query-builder-angular 提供了基于 Angular Signal 的查询构建器组件，使用 PrimeNG 作为 UI 库。

安装​

npm install @aiao/rxdb-query-builder @aiao/rxdb-query-builder-angular primeng

基础用法​

import { Component } from '@angular/core';
import { QueryBuilderComponent, type RxDBQueryOutput } from '@aiao/rxdb-query-builder-angular';

@Component({
  standalone: true,
  imports: [QueryBuilderComponent],
  template: `
    <rxdb-query-builder
      [fields]="fields"
      [maxDepth]="3"
      (queryChange)="onQueryChange($event)"
      (validationChange)="onValidation($event)"
    />
  `
})
export class SearchComponent {
  fields = [
    { name: 'name', displayName: '姓名', type: 'string' as const },
    { name: 'age', displayName: '年龄', type: 'number' as const },
    { name: 'active', displayName: '激活', type: 'boolean' as const }
  ];

  onQueryChange(query: RxDBQueryOutput<User>) {
    console.log('查询条件:', query);
  }

  onValidation(result: ValidationResult) {
    console.log('校验结果:', result);
  }
}

组件 API​

QueryBuilderComponent​

主组件，封装了完整的查询构建器 UI。

Input类型默认值说明
schemaSchemaInfo—Schema 信息（包含 entityName 和 fields）
fieldsFieldMetadata[][]字段列表（直接传入，优先级高于 schema）
initialQueryRxDBQueryOutput<T>—初始查询条件
maxDepthnumber5最大嵌套层级
Output类型说明
queryChangeRxDBQueryOutput<T>查询条件变更时触发
validationChangeValidationResult校验结果变更时触发

内部组件​

以下组件由 QueryBuilderComponent 内部组合使用，通常不需要直接引用：

组件说明
QueryGroupComponent规则组（AND/OR），支持递归嵌套
QueryRuleComponent单条规则（字段 + 操作符 + 值）
FieldSelectorComponent字段选择器（PrimeNG CascadeSelect）
OperatorSelectorComponent操作符选择器（PrimeNG Select）
ValueInputComponent值输入（根据字段类型动态切换）
SubqueryBuilderComponent子查询构建器（用于 exists/notExists）

从 Entity 解析 Schema​

import { Component, inject } from '@angular/core';
import { RxDB, getEntityMetadata } from '@aiao/rxdb';
import { createSchemaFromEntity } from '@aiao/rxdb-query-builder';

@Component({ ... })
export class SearchComponent {
  private rxdb = inject(RxDB);

  fields = createSchemaFromEntity(
    getEntityMetadata(Todo),
    { includeRelations: true }
  );
}

加载初始查询​

@Component({
  template: `
    <rxdb-query-builder [fields]="fields" [initialQuery]="savedQuery" (queryChange)="onQueryChange($event)" />
  `
})
export class SearchComponent {
  savedQuery: RxDBQueryOutput<Todo> = {
    combinator: 'and',
    rules: [{ field: 'completed', operator: '=', value: false }]
  };
}

Signal 架构​

组件内部使用 Angular Signal API：

  • input() — 输入信号
  • output() — 输出信号
  • computed() — 派生信号
  • toSignal() — 将 QueryBuilderService 的 RxJS Observable 转为 Signal
  • provideZonelessChangeDetection() — 支持 Zoneless 模式

所有组件均为 standalone，使用 OnPush 变更检测策略。