取消订阅 Firestore 流 - Angular

Question

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

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

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

注意：请求尚未完成

退出后出现这个错误（可能是我设置的规则造成的）

FirebaseError：权限缺失或不足

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

这是我目前的解决方案：

data.service.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

使用其中一个rxjs操作符，例如take(1)取值后自行退订

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

Answer 2

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 是你需要的