跳到主要内容

TreeSelectComponent

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:209

树形下拉选择组件

Description​

基于 Popover API 和 @angular/cdk/a11y 的树形字段选择器：

  • 使用原生 Popover API，在 overflow 容器中不被裁剪
  • 支持关键字过滤（自动展开匹配路径）
  • 支持展开/折叠关系节点
  • 键盘导航：↑↓ 移动、→ 展开、← 折叠、Enter 选中、Escape 关闭
  • 使用 CDK ActiveDescendantKeyManager + aria-activedescendant 满足 WAI-ARIA 无障碍规范

Example​

<rxdb-tree-select
  [nodes]="fieldTree()"
  [selected]="selectedField()"
  placeholder="选择字段"
  (selectChange)="onFieldSelect($event)"
/>

Constructors​

Constructor​

new TreeSelectComponent(): TreeSelectComponent;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:277

Returns​

TreeSelectComponent

Properties​

activeItemId​

readonly activeItemId: Signal<string | null>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:270

ChevronDownIcon​

protected readonly ChevronDownIcon: typeof LucideChevronDown;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:221

ChevronRightIcon​

protected readonly ChevronRightIcon: typeof LucideChevronRight;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:222

defaultTypeColor​

protected readonly defaultTypeColor: "text-base-content/40" = 'text-base-content/40';

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:246

defaultTypeIcon​

protected readonly defaultTypeIcon: typeof LucideType = TypeIcon;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:245

displayValue​

readonly displayValue: Signal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:254

filterText​

protected readonly filterText: WritableSignal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:220

listId​

protected readonly listId: string;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:219

minWidth​

readonly minWidth: InputSignal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:251

nodes​

readonly nodes: InputSignal<FieldTreeNode[]>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:248

placeholder​

readonly placeholder: InputSignal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:250

selectChange​

readonly selectChange: OutputEmitterRef<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:252

selected​

readonly selected: InputSignal<string>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:249

selectedNode​

readonly selectedNode: Signal<FieldTreeNode | null | undefined>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:259

typeColorMap​

protected readonly typeColorMap: Partial<Record<string, string>>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:234

typeIconMap​

protected readonly typeIconMap: Partial<Record<string, LucideIconInput>>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:223

uid​

protected readonly uid: string;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:218

visibleItems​

readonly visibleItems: Signal<FlatItem[]>;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:264

Methods​

onBeforeToggle()​

onBeforeToggle(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:298

Parameters​

ParameterType
eventEvent

Returns​

void

onItemClick()​

onItemClick(item): void;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:359

Parameters​

ParameterType
itemFlatItem

Returns​

void

onKeydown()​

onKeydown(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:319

Parameters​

ParameterType
eventKeyboardEvent

Returns​

void

onToggle()​

onToggle(event): void;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:309

Parameters​

ParameterType
eventEvent

Returns​

void

trackItem()​

protected trackItem(item): string;

Defined in: packages/rxdb-model-angular/src/query-builder/tree-select/tree-select.component.ts:369

追踪函数：使用 value + isExistsOption 避免重复 key

Parameters​

ParameterType
itemFlatItem

Returns​

string