rxdb-angular

Angular 框架集成库，为 Angular 应用提供 RxDB 支持。基于 Angular Signals 实现响应式数据流。

功能特性

• Angular Signals 集成: 查询结果以 Signal 暴露，天然融入 Angular 响应式渲染
• 响应式查询 Hooks: useGet / useFind / useFindByCursor 等，覆盖基础/树/图仓库查询
• 无限滚动: InfiniteScrollingList 提供游标分页的加载状态与控制
• 变更检测指令: RxDBEntityChangeDirective 在 OnPush 下实时反映实体编辑
• 依赖注入: 通过 provideRxDB 完全接入 Angular 依赖注入系统
• 类型安全: 完整的 TypeScript 类型支持

何时使用

• 构建 Angular 应用并需要本地优先数据库
• 需要响应式数据流与 Angular Signals 无缝集成
• 需要离线优先的 Angular 应用

安装

npm install @aiao/rxdb @aiao/rxdb-angular
# 或
pnpm add @aiao/rxdb @aiao/rxdb-angular

使用

注册 RxDB

import { provideRxDB } from '@aiao/rxdb-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    // 传入返回 RxDB 实例的工厂函数
    provideRxDB(() => rxdb)
  ]
};

查询数据

import { Component } from '@angular/core';
import { useGet, useFind } from '@aiao/rxdb-angular';

@Component({
  selector: 'app-todo',
  template: `
    @if (todo.isLoading()) {
      <span>Loading…</span>
    } @else {
      <span>{{ todo.value()?.title }}</span>
    }
  `
})
export class TodoComponent {
  readonly todo = useGet(Todo, 'todo-1');
  readonly todos = useFind(Todo, { where: { combinator: 'and', rules: [] } });
}

无限滚动

const list = new InfiniteScrollingList(rxdb, Todo, { limit: 50 });
list.loadMore(); // 加载下一页
list.refresh(); // 从头刷新

OnPush 下的实时变更检测

<div [rxdbChangeDetector]="entity"></div>

完整示例

参考 dev-rxdb-angular 中的完整集成示例。

RxDB Angular 集成包 - Angular 框架的 RxDB 响应式数据库支持 提供 Angular 特有的响应式状态管理和变更检测集成

Classes

Class	Description
InfiniteScrollingList	无限滚动的列表
RxDBEntityChangeDirective	RxDB 实体变化指令 如果你使用了 changeDetection: ChangeDetectionStrategy.OnPush 那么正在输入的变化不会触发 angular 渲染机制，使用这个指令可以实现实时渲染

Interfaces

Interface	Description
InfiniteScrollResource	Angular 无限滚动资源。
RxDBResource	-

Type Aliases

Type Alias	Description
InfiniteScrollOptions	Angular 无限滚动查询选项或响应式选项读取器。

Functions

Function	Description
provideRxDB	配置 Angular 注入器使用的 RxDB 实例。
useAction	-
useCount	统计满足条件的实体数量
useCountAncestors	统计树结构中的祖先数量
useCountDescendants	统计树结构中的子孙数量
useCountNeighbors	统计图结构中的邻接数量
useFind	查找符合条件的多个实体
useFindAll	查找全部实体
useFindAncestors	查找树结构中的所有祖先实体
useFindByCursor	使用游标分页查找实体
useFindDescendants	查找树结构中的所有子孙实体
useFindOne	查找第一个匹配条件的实体
useFindOneOrFail	查找匹配的实体，未找到则抛出错误
useGet	通过 ID 获取单个实体
useGraphNeighbors	查找图结构中的邻接实体
useGraphPaths	查找图结构中两个实体之间的路径
useInfiniteScroll	从当前 Angular 注入上下文创建无限滚动资源。
useRepositoryQuery	将实体仓库的 Observable 查询转换为惰性 Angular Signal 资源。
useState	-