如何在AngularFire2集合新增/删除文档时触发自定义函数？

嘿，这个需求其实挺常见的！你提到的valueChanges()确实能拿到集合的数据，但它只会返回文档内容本身，没法直接区分是新增还是删除了文档。要实现你想要的效果，咱们可以换用AngularFire2里的snapshotChanges()方法——它能提供文档变化的元信息，包括动作类型哦。

下面是具体的实现方案，一步步来：

1. 替换valueChanges()为snapshotChanges()
   这个方法返回的Observable会包含每个文档的快照和对应的动作类型（新增、删除、修改），刚好能满足咱们的需求。

2. 通过管道解析快照数据
   用RxJS的map操作符把快照里的关键信息（动作类型、文档ID、文档数据）提取出来，方便后续处理。

3. 订阅并根据动作类型执行函数
   在订阅回调里判断当前是新增还是删除动作，然后调用你预先定义好的处理函数。

完整的示例代码如下：

import { map } from 'rxjs/operators';

// 你的组件类内部代码
let path = 'doc1/' + doc2 + '/doc3/';
this.varCollection = this.afs.collection(path);

// 用snapshotChanges替代valueChanges，解析出动作类型和文档信息
this.var$ = this.varCollection.snapshotChanges().pipe(
  map(actions => actions.map(action => ({
    type: action.type,
    docId: action.payload.doc.id,
    data: action.payload.doc.data() as YourDataType // 替换成你的实际数据类型
  })))
);

// 订阅并处理增删动作
this.subscription = this.var$.subscribe(changedItems => {
  changedItems.forEach(item => {
    switch (item.type) {
      case 'added':
        console.log('新增了文档:', item.docId);
        this.handleDocumentAdd(item); // 调用你的新增处理函数
        break;
      case 'removed':
        console.log('删除了文档:', item.docId);
        this.handleDocumentRemove(item.docId); // 调用你的删除处理函数
        break;
      // 要是需要处理修改，也可以加上'modified'的分支
    }
  });
});

// 定义你的自定义处理函数
handleDocumentAdd(item: {docId: string, data: YourDataType}) {
  // 这里写新增文档时要执行的逻辑
}

handleDocumentRemove(docId: string) {
  // 这里写删除文档时要执行的逻辑
}

// 记得在组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.subscription?.unsubscribe();
}

额外小提示： #

• 如果只需要监听新增和删除，可以在pipe里加个filter操作符，提前过滤掉不需要的动作类型，减少后续处理量：

map(actions => actions.filter(action => action.type === 'added' || action.type === 'removed'))

• 如果你不需要文档ID，只关心数据，也可以结合docChanges()方法，它会返回更简洁的文档变化对象。

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