跳到主要内容

查询构建器 Angular

@aiao/rxdb-model-angular 提供 Angular 版本的查询构建器组件。核心查询模型与字段解析工具来自 @aiao/rxdb-model。

安装​

npm install @aiao/rxdb-model @aiao/rxdb-model-angular

基础用法​

import { Component } from '@angular/core';
import { getEntityMetadata, type RuleGroup } from '@aiao/rxdb';
import { QueryBuilderComponent } from '@aiao/rxdb-model-angular';
import { createSchemaFromEntity, type ValidationResult } from '@aiao/rxdb-model';

@Component({
  standalone: true,
  imports: [QueryBuilderComponent],
  template: `
    <rxdb-query-builder
      [fields]="fields"
      [maxDepth]="3"
      (queryChange)="onQueryChange($event)"
      (validationChange)="onValidation($event)"
    />
  `
})
export class SearchComponent {
  fields = createSchemaFromEntity(getEntityMetadata(User), {
    includeRelations: true
  });

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

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

组件 API​

QueryBuilderComponent​

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

Input类型默认值说明
schemaSchemaInfo—Schema 信息（包含 entityName 和 fields）
fieldsFieldMetadata[][]字段列表（直接传入，优先级高于 schema）
initialQueryRuleGroup<T>—初始查询条件
maxDepthnumber5最大嵌套层级
heightstring80vh内容区域最大高度
enableDragbooleantrue是否启用拖拽排序
enableCollapsebooleantrue是否启用分组折叠
Output类型说明
queryChangeRuleGroup<T>查询条件变更时触发
validationChangeValidationResult校验结果变更时触发

从 Entity 解析 Schema​

import { getEntityMetadata } from '@aiao/rxdb';
import { createSchemaFromEntity } from '@aiao/rxdb-model';

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

加载初始查询​

import type { RuleGroup } from '@aiao/rxdb';

savedQuery: RuleGroup<Todo> = {
  combinator: 'and',
  rules: [{ field: 'completed', operator: '=', value: false }]
};

Signal 架构​

组件内部使用 Angular Signal API：

  • input()：输入信号
  • output()：输出信号
  • computed()：派生信号
  • toSignal()：将 QueryBuilderService 的 RxJS Observable 转为 Signal

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

什么时候传 schema，什么时候传 fields​

  • 如果你已经有 createSchemaFromEntity(...) 的结果，直接传 fields
  • 如果你想把实体名和字段一起作为一份对象管理，可以传 schema
  • 两者同时传入时，组件优先使用 fields