后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载导读本文围绕 AngularFire 的 Realtime DatabaseRTDB列表查询能力展开讲解如何通过db.list(path, ref ...)的第二参数——查询函数QueryFn——为列表数据叠加orderByChild、equalTo、limitToFirst等过滤条件并进一步结合 RxJS 的switchMap与Subject/BehaviorSubject实现响应式动态查询当输入或状态变化时自动重新触发查询。读完本文你将掌握常量查询与动态查询两种写法、全部查询选项的语义与限制、非法组合的规避方式以及 AngularFire 在源码层面如何把查询结果组装成可订阅的 Observable 流。本文依据 site/src/rtdb/querying.md 撰写并对照仓库中 compat 版数据库实现 与 新版 tree-shakable API 做了源码级印证。一、什么是 RTDB 列表查询Realtime Database 中存放的数据通常是列表如/items下的多条记录。AngularFire 的db.list()可以返回整张列表但真实业务中往往需要过滤只要某个字段等于特定值的记录、只要前 N 条记录、只要排在某个排序键之后的记录。这些能力由 RTDB 的原生查询方法提供AngularFire 只是把它们以函数式的方式注入到列表创建的流程中。db.list()的第二参数是一个查询函数QueryFn它接收一个firebase.database.Reference并返回一个带过滤条件的 Query 对象。在 compat 版源码 中可以看到其实现listT(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireListT { const ref inject(NgZone).runOutsideAngular(() getRef(this.database, pathOrRef)); let query: DatabaseQuery ref; if (queryFn) { query queryFn(ref); // 把过滤条件叠加到 Reference 上 } return createListReferenceT(query, this, this.injector); }其中QueryFn的类型定义在 src/compat/database/interfaces.tsexport type QueryFn (ref: DatabaseReference) DatabaseQuery;也就是说你传入的函数必须返回一个Query——这正是链式调用ref.orderByChild(...).equalTo(...)后得到的结果。二、创建带常量值的查询最简单的用法是传入固定的过滤条件db.list(/items, ref ref.orderByChild(size).equalTo(large))这行代码的含义获取/items列表先按子字段size排序再只保留size large的记录。整个过滤发生在服务端客户端只会收到筛选后的结果而不是拉取全量数据再本地过滤。值得注意的是db.list()的第一参数同样支持传入一个Reference或Query即PathReference类型见 interfaces.ts这为复用已有查询对象提供了灵活性。三、查询选项Query Options速查表下表完整列出了可用的查询方法及其用途与 原文档 保持一致方法用途orderByChild指定按某个子字段排序。orderByKey布尔值按 Firebase Database 的 key 排序。orderByValue按节点自身的值排序。orderByPriority1布尔值按 Firebase Database 的 priority 排序已不推荐。equalTo2将列表限制为包含某个特定值的项。limitToFirst设置从排序结果开头返回的最大条数。limitToLast设置从排序结果末尾返回的最大条数。startAt2返回大于等于指定 key 或 value 的项具体取决于所选排序方式。endAt2返回小于等于指定 key 或 value 的项具体取决于所选排序方式。注 1关于orderByPriority。这是旧式的排序方式官方已不再推荐使用。凡是能用orderByPriority实现的场景都应改用orderByChild例如改用orderByChild(priority)或直接给节点增加一个普通字段来承载排序依据。从仓库文档 docs/compat/rtdb/querying-lists.md 可以看到同样的说明两处一致。注 2startAt/endAt/equalTo的可选key参数。当按 child、value 或 priority 排序时Firebase SDK 为这三个方法都支持一个可选的key参数用于在值相同时进一步按 key 定位。可以通过对象字面量同时指定value和keystartAt: { value: some-value, key: some-key }这在值相等但需要精确起点/终点的分页场景中非常有用。关于排序与过滤的完整语义可进一步查阅 Firebase 官方文档中关于处理数据列表sorting and filtering data的章节。四、非法查询组合这些写法不会生效RTDB 的查询有一套硬性约束违反时查询不会生效甚至抛错务必避免。约束一查询只能使用一种排序方法。orderByChild、orderByKey、orderByPriority、orderByValue四者只能择一不可叠加// WARNING: Do not copy and paste. This will not work! ref.orderByChild(size).equalTo(large).orderByKey(true)**约束二limitToFirst与limitToLast不能同时使用。**它们互斥只能二选一// WARNING: Do not copy and paste. This will not work! ref.limitToFirst(10).limitToLast(100)这两条约束在 原文档 与 compat 文档 中均有明确警示。合理的组合方式例如先orderByChild(size)再叠加equalTo、limitToFirst或startAt/endAt中的一个或多个过滤/限制条件。五、动态查询让查询随状态变化自动重新触发常量查询适合条件固定的场景而搜索框、筛选按钮、分页器等场景要求查询条件随用户输入动态变化。AngularFire 的解决方案是让 RxJS 来驱动查询把查询条件放进一个流Subject再用switchMap把每次条件变化映射为一个全新的数据库查询 Observable。5.1 核心机制Subject switchMapSubject既是 Observable 又是 Observer可以向多个订阅者多播值multicast维护一份监听者注册表行为类似于 Angular 的EventEmitter。switchMap把 Subject 发出的每个值映射为一个新的 Observable这里就是一次数据库查询当新的值到来时会自动取消上一个内部 Observable 的订阅再订阅新的——这正是重新触发查询的关键。基础示例原文档const size$ new Subjectstring(); const queryObservable size$.pipe( switchMap(size db.list(/items, ref ref.orderByChild(size).equalTo(size)).valueChanges() ) ); // subscribe to changes queryObservable.subscribe(queriedItems { console.log(queriedItems); }); // trigger the query size$.next(large); // re-trigger the query size$.next(small);每次调用size$.next(...)switchMap就会丢弃旧的查询流并建立新的查询流订阅方始终收到与最新条件匹配的数据。5.2 完整组件示例带过滤按钮的widgets应用原文档给出了一个可直接运行的 Angular 组件示例页面渲染/items列表并提供 Small / Medium / Large / Extra Large 四个过滤按钮与一个清除过滤按钮。它使用BehaviorSubject保存当前过滤值BehaviorSubject与Subject的区别在于它会立即向新订阅者发出当前值用switchMap重建查询最后通过async管道在模板中消费 Observable。import { Component } from angular/core; import { AngularFireDatabase, AngularFireAction } from angular/fire/database; import { Observable, Subscription, BehaviorSubject } from rxjs; import { switchMap } from rxjs/operators; Component({ selector: app-root, template: h1Firebase widgets!/h1 div *ngIfitems$ | async; let items; else loading ul li *ngForlet item of items {{ item.payload.val().text }} code{{ item.payload.key }}/code /li /ul div *ngIfitems.length 0No results, try clearing filters/div /div ng-template #loadingLoadinghellip;/ng-template div h4Filter by size/h4 button (click)filterBy(small)Small/button button (click)filterBy(medium)Medium/button button (click)filterBy(large)Large/button button (click)filterBy(x-large)Extra Large/button button (click)filterBy(null) *ngIfthis.size$.getValue() emclear filter/em /button /div , }) export class AppComponent { items$: ObservableAngularFireActionfirebase.database.DataSnapshot[]; size$: BehaviorSubjectstring|null; constructor(db: AngularFireDatabase) { this.size$ new BehaviorSubject(null); this.items$ this.size$.pipe( switchMap(size db.list(/items, ref size ? ref.orderByChild(size).equalTo(size) : ref ).snapshotChanges() ) ); } filterBy(size: string|null) { this.size$.next(size); } }这个示例值得注意的三个细节条件分支的 QueryFnsize ? ref.orderByChild(size).equalTo(size) : ref——当过滤值存在时叠加排序与过滤否则原样返回ref实现清除过滤。snapshotChanges()返回的 Action 结构模板中通过item.payload.val().text取字段值、item.payload.key取记录 key这对应AngularFireActionDatabaseSnapshotT类型见 interfaces.ts其中payload是DataSnapshot。BehaviorSubject初始化传null组件刚创建时立即触发一次无条件查询显示全部数据*ngIfthis.size$.getValue()则保证仅在存在过滤值时显示清除过滤按钮。5.3 运行示例所需的数据结构上述示例要求 RTDB 中存在如下结构的样本数据原文档{ items: { a : { size : small, text : small thing }, b : { size : medium, text : medium sample }, c : { size : large, text : large widget } } }三条记录分别对应 small / medium / large 三种尺寸足以验证点击 Small 只显示 a 记录之类的过滤效果。六、源码级解析查询流是如何被组装的6.1 从AngularFireList到查询 Observable调用db.list(/items, queryFn)后AngularFire 会通过 createListReference 组装出一个AngularFireListT对象。它对外暴露四种数据流方法interfaces.tssnapshotChanges(events?)返回SnapshotActionT[]每个 Action 携带DataSnapshot、key、prevKey适合在模板中同时取 key 与值stateChanges(events?)只发出单个SnapshotActionT一次事件一条不保留完整列表状态auditTrail(events?)返回累计事件历史用于审计追踪valueChanges(events?, options?)只返回值的数组若传入{ idField: key }还会把记录 key 合并进每个对象中实现见 create-reference.ts。这四种方法内部统一基于snapshotChanges/listChanges实现。6.2listChanges与buildView增量事件如何变成完整数组查询的核心实现在 src/compat/database/list/changes.tsexport function listChangesT any(ref: DatabaseQuery, events: ChildEvent[], scheduler?: SchedulerLike): ObservableSnapshotActionT[] { return fromRef(ref, value, once, scheduler).pipe( switchMap(snapshotAction { const childEvent$ [of(snapshotAction)]; events.forEach(event childEvent$.push(fromRef(ref, event, on, scheduler))); return merge(...childEvent$).pipe(scan(buildView, [])); }), distinctUntilChanged() ); }可以推断其设计意图先用once读取一次初始value快照建立视图基线再对child_added/child_removed/child_changed/child_moved等事件建立长期监听通过merge合并初始快照与增量事件流再交给scan(buildView, [])累积维护一份有序数组。buildViewchanges.ts#L42-L88根据prevKey计算插入位置处理新增、删除、修改、移动四种变更从而让订阅者拿到的始终是与当前查询条件一致、且顺序正确的完整列表。这也解释了为什么动态查询用switchMap是天然契合的每次切换查询条件switchMap会取消旧listChanges流的订阅旧监听随之清理并建立新的查询监听。6.3 新版 tree-shakable API 的对应关系仓库同时提供了模块化、可 tree-shaking 的新版 API位于 src/database/。从源码结构看src/database/database.ts 基于firebase/database导出了Database、DatabaseInstances与databaseInstance$src/database/rxfire.ts 通过ɵzoneWrap包装了 rxfire 的list、listVal、objectVal、stateChanges、auditTrail等函数并导出ListenEvent、ListenerMethodssrc/database/database.module.ts 提供provideDatabase(fn, ...deps)支持通过注入器Injector自定义创建数据库实例并在依赖数组中预留了AuthInstances、AppCheckInstances等可选依赖注释明确DatabaseAuth work better if Auth is loaded first。仓库的示例应用 sample/src/app/database/database.component.ts 展示了新版 API 的典型用法——直接使用getDatabase、ref、objectVal等函数并结合TransferState做服务端渲染SSR时的状态传递。如果你正在新项目中从零接入建议优先采用这套模块化 API而本指南中的db.list写法属于兼容compat层 API在旧项目或需要AngularFireDatabase.list便捷能力时依然适用。七、实战要点小结常量查询db.list(/items, ref ref.orderByChild(size).equalTo(large))过滤在服务端完成。动态查询用BehaviorSubject或Subject承载查询条件switchMap映射到db.list(...).snapshotChanges()/valueChanges()条件一变即自动重查。排序唯一orderByChild/orderByKey/orderByValue/orderByPriority四选一limitToFirst与limitToLast二选一。范围过滤startAt/endAt/equalTo支持{ value, key }复合参数适合精确分页。取数方式模板需要 key 与值用snapshotChanges()item.payload.key/item.payload.val()只需值用valueChanges()需要把 key 合并进对象时传{ idField: key }。版本注意db.list写法对应 compat 层 API新项目可参考 src/database/ 下的模块化写法示例见 sample 应用。赞分享后端【免费下载链接】angularfireAngular Firebase ❤️项目地址https://gitcode.com/gh_mirrors/an/angularfire点击查看免费下载相关推荐AngularFirecompatRealtime Database 列表查询完全指南从基础 Query 到 RxJS 动态查询AngularFirecompatRealtime Database 列表查询完全指南从基础 Query 到 RxJS 动态查询 本文基于 Angular后端TanStack Start 运行时 CDN 资源 URL 重写transformAssets 完整实战指南TanStack Start 运行时 CDN 资源 URL 重写transformAssets 完整实战指南 transformAssets 是 TanSta后端RxJS 4 查询 Observable 序列完全指南组合、投影、过滤与时间缓冲RxJS 4 查询 Observable 序列完全指南组合、投影、过滤与时间缓冲 本文是基于 RxJS v4 官方入门文档 Querying Observab后端上一篇边缘计算环境下的ArchiSteamFarm部署优化低资源设备高效运行指南下一篇如何快速配置DOSBox-XPC-98复古游戏终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考