如何移除AngularFire创建的Firestore集合监听器？

你当前用collectionData创建的是一个Observable，Firestore的监听会在你订阅这个Observable时建立，要移除监听，本质是对订阅进行退订操作，分两种场景处理：

1. 手动订阅时手动退订 #

如果是在组件里手动调用.subscribe()来订阅数据流，需要保存订阅实例，在组件销毁时执行退订：

修改后的组件代码：

import { Subscription } from 'rxjs';
// 其他必要导入...

interface Scientist {
  name?: string | null,
  born?: number | null,
  accomplishment?: string | null
};

export class AppComponent implements OnInit, OnDestroy {
  scientist$: Observable<Scientist[]>;
  private scientistSubscription?: Subscription;

 constructor(public firestore: Firestore) {
    this.scientist$ = collectionData(collection(firestore, 'scientists'));
  }

  ngOnInit(): void {
    // 订阅并保存订阅实例
    this.scientistSubscription = this.scientist$.subscribe(scientists => {
      // 在这里处理数据逻辑
      console.log(scientists);
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时退订，同时移除Firestore的监听
    this.scientistSubscription?.unsubscribe();
  }
}

2. 使用async管道自动管理退订 #

如果是在模板里用async管道订阅（比如循环渲染数据），Angular会自动在组件销毁时帮你完成退订，不需要手动写额外逻辑，这也是Angular推荐的方式：

模板示例：

<ul>
  <li *ngFor="let scientist of scientist$ | async">
    {{ scientist.name }} - {{ scientist.accomplishment }}
  </li>
</ul>

这种情况下，你不需要在组件内手动订阅和退订，async管道会自动处理监听的建立与销毁。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe