Angular中使用rxResource()响应数据库变更的实现方法

核心问题 #

• loader()生成的Observable仅处理首个发射值，数据库变更时无法自动更新视图
• rxResource默认接收首个值后就取消订阅，违背了数据流自动获取最新数据的初衷
• 需求：无需手动点击刷新，模板自动展示最新资讯

解决方案 #

1. 让loader()返回持续推送数据的Observable #

确保数据库查询的Observable是能监听变更并持续发射数据的类型（比如Room的@Query返回Flowable/Observable，而非Single/Maybe）。如果原来的loader()只取一次数据，改成返回监听流：

// 示例：Room数据库查询返回Flowable，持续推送数据变更
fun loader(): Observable<List<News>> {
    return db.newsDao().getAllNews()
        .toObservable()
}

2. 调整rxResource的订阅行为 #

rxResource默认会用take(1)截断流，你需要禁用这个默认行为，让它保持订阅状态：

// 以Angular的rxResource为例，修改配置
const resource = rxResource.create({
    getNews: {
        url: '/api/news',
        method: 'get',
        // 关闭自动取消订阅的默认逻辑
        autoCancel: false,
        // 或者自定义流处理，不做截断
        transform: (obs) => obs
    }
});

3. 绑定响应式流到模板 #

只要rxResource保持订阅，且后端/数据库的Observable持续推送新数据，模板就能自动更新。比如在Angular中用async管道直接绑定：

<!-- 模板通过async管道自动处理订阅和视图更新 -->
<div *ngFor="let news of resource.getNews() | async">
    {{ news.title }}
</div>

关键逻辑 #

rxResource的take(1)是为单次请求场景优化的，对于需要持续监听的数据流，只要移除这个截断操作，让Observable保持活跃，就能接收数据库的后续变更推送，实现和传统订阅方案完全一致的自动刷新效果。

内容的提问来源于stack exchange，提问作者KarlB