取消订阅 Firestore 流 - Angular

Question

最近我在我的 Angular 项目中实现了 Firebase，我有一个关于取消订阅数据流的问题。

当您使用经典的 HTTP 调用时，由此产生的 observable 是有限的，但是对于 firestore，它们是无限的，因此您必须取消订阅。 但是当我这样做时（在销毁组件并注销之后），我仍然在控制台中收到一个错误，我可以看到请求仍在发送（或持续）。

在网络选项卡中，我可以在请求时间中看到这一点：

注意：请求尚未完成

注销后弹出此错误（可能是由于我设置的规则引起的）

FirebaseError：权限缺失或不足

而且，即使我在 angular 中使用async管道，我仍然会收到错误消息。

这是我目前的解决方案：

数据服务.ts

  items: Observable<any[]>;

  constructor(db: AngularFirestore) {
    this.items = db.collection("data").valueChanges();
  }

  getItems() {
    return this.items;
  }

home.component.ts

  req: Subscription;

  ngOnInit(): void {
    this.req = this.dataService.getItems().subscribe(
      res => {
        console.log(res);
      },
      err => console.log(err),
      () => console.log("completed")
    );
  }

  ngOnDestroy(): void {
    console.log("ya");
    this.req.unsubscribe();
  }

感谢您的建议！

Answer 1

home.component.ts

import { takeWhile } from "rxjs/operators";

@Component({...})
export class HomeComponent implements OnInit, OnDestroy {
  isAlive: boolean = true;

  ...

  ngOnInit(): void {
    this.dataService.getItems()
      .pipe(takeWhile(() => this.isAlive))
      .subscribe(res => {
        console.log(res);
      });
  }

  ngOnDestroy(): void {
    this.isAlive = false;
  }

}

takeWhile是你需要的

Answer 2

使用 rxjs 运算符之一，例如在取值后取 (1)，它会自行取消订阅

this.dataService.getItems().pipe(take(1)).subscribe(
      res => {
        console.log(res);
      },
      err => console.log(err),
      () => console.log("completed")
    );