javascript - 退订Firestore流-Angular

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

当您使用经典HTTP调用时，可观察到的是有限的，但是在使用Firestore时，它们是无限的，因此您必须退订。但是，当我这样做时（销毁组件并注销之后），控制台中仍然出现错误，并且可以看到请求仍在发送（或持久存在）。

在“网络”标签中，我可以在请求时间看到以下内容：


  警告：请求尚未完成


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


  FirebaseError：缺少权限或权限不足


而且，即使我在中使用async管道，仍然会出现错误。

这是我当前的解决方案：

数据服务

  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();
  }

感谢您的建议！

最佳答案

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