取消订阅 observables 的 Ionic 和 AngularFire2 最佳实践

Question

我有一个使用 AngularFire2 和 Firestore 的多页 Ionic-Angular 手机应用程序。我真正喜欢 Firestore 的一件事是数据的离线持久性。我的问题围绕着这种数据持久性和取消订阅 AngularFire2 流 observables 的最佳实践。

我的主页是一个事件列表，当一个事件被选中时，应用程序会路由到包含该特定事件详细信息的单个事件页面。目前，我使用 AngularFire2 API 根据 Firestore 中单事件组件 ngOnInit 中所选事件的文档 ID 订阅单事件。

我对 Angular 中的 observables 的理解是，建议在退出组件时取消订阅 observables。但是，如果我在单事件组件中执行此操作并且用户以某种方式失去了互联网连接，当他们导航到主页然后返回单事件时，由于流可观察对象已被取消订阅并且应用程序无法联系 Firestore。现在如果我不取消订阅，那么即使离线，单事件页面仍然会显示数据。这是我想要的行为，但是在离开单事件页面时我没有取消订阅可观察对象是否存在某种问题？

即使在基于 Ionic 的手机应用程序中，取消订阅 observables 也很重要吗？还是我应该重新设计我的应用程序以实现所有最佳实践？ 感谢您的任何投入！

Answer 1

即使在基于 Ionic 的手机应用程序中，取消订阅 observable 也很重要吗？

是的，否则如果您离开页面并返回，它会创建另一个订阅相同的 observable，这会导致内存泄漏。

我知道有几种方法可以在您离开时停止订阅。
1. 创建、分配和取消订阅Subscription。

foo$: Observable<Foo>;
fooSub: Subscription;

constructor() {
  this.fooSub = this.foo$.subscribe(foo => { console.log(foo); });
}

ionViewDidLeave() {
  this.fooSub.unsubscribe();
}

2。创建一个布尔值来限制订阅运行的时间。

active: boolean = true;
foo$: Observable<Foo>;

constructor() {
  this.foo$.takeWhile(() => this.active).subscribe(foo => { console.log(foo); });
}

ionViewDidLeave() {
  this.active = false;
}

ionViewDidLeave 用于 IonicPage 组件，ngOnDestroy 用于自定义组件。

如果您希望数据在设备离线时保留，您应该查看ngrx/store。