如何订阅Angular Firestore集合时仅获取订阅时数据，不开启实时更新

你可以通过以下两种方式实现仅获取当前集合数据、不接收后续实时更新的需求：

方案1：valueChanges + take(1) 操作符 #

如果你的现有代码已经基于valueChanges实现，只需要追加rxjs的take(1)操作符即可，它会自动在拿到第一次发射的数据后终止订阅，不再接收后续更新：

1. 首先导入take操作符

import { take } from 'rxjs/operators';

2. 业务代码示例

interface Item {
  // 你的集合数据类型定义
  id?: string;
  name: string;
}

// 初始化集合引用
const itemsCollection: AngularFirestoreCollection<Item> = this.afs.collection<Item>('你的集合路径');

itemsCollection.valueChanges()
  .pipe(take(1))
  .subscribe(currentItems => {
    // currentItems就是当前已存在的所有集合数据，后续数据变更不会触发该回调
    console.log(currentItems);
  });

方案2：使用get()方法（更推荐） #

AngularFirestoreCollection自带的get()方法本身就是为单次查询设计的，不会建立长期的实时监听连接，性能开销更小：

interface Item {
  // 你的集合数据类型定义
  id?: string;
  name: string;
}

const itemsCollection: AngularFirestoreCollection<Item> = this.afs.collection<Item>('你的集合路径');

// 订阅写法
itemsCollection.get()
  .subscribe(snapshot => {
    const currentItems = snapshot.docs.map(doc => doc.data() as Item);
    console.log(currentItems);
  });

// async/await写法更简洁
async fetchCurrentItems() {
  const snapshot = await itemsCollection.get().toPromise();
  const currentItems = snapshot.docs.map(doc => doc.data() as Item);
  return currentItems;
}

你还可以通过传入参数指定查询源，比如强制从服务端拉取最新数据：
itemsCollection.get({ source: 'server' })
可选的source参数值包括：

• default：优先从缓存拿，没有才请求服务端
• server：强制请求服务端最新数据
• cache：仅从本地缓存取数

两种方案的选型建议 #

• 如果你不想改动已有的valueChanges相关代码，选择方案1，仅需追加一行操作符即可
• 如果是新写的逻辑，优先选择方案2，资源消耗更低，还可以灵活配置查询源

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