离子&取消订阅可观察对象的 AngularFire2 最佳实践 [英] Ionic & AngularFire2 best practice for unsubscribing to observables

问题描述

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

I have a multi-page Ionic-Angular phone app that uses AngularFire2 & Firestore. One of the things I really like about Firestore is offline persistence of data. My question revolves around this data persistence and best practices for unsubscribing to AngularFire2 stream observables.

我的主页是事件列表，当将事件被选中，应用程序路由到单个事件页面，具有此特定事件的详细信息.目前，我使用 AngularFire2 API 根据 Firestore 中单事件组件 ngOnInit 中所选事件的文档 ID 订阅单事件.

My home page is a list of events and when an event is selected the app routes to a single-event page with this specific event's details. Currently I subscribe to the single-event using AngularFire2 API based on the selected event's doc ID in Firestore within the single-event component ngOnInit.

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

My understanding of observables in Angular is that it is recommended to unsubscribe to observables when navigating back out of a component. However, if I do this in the single-event component and the user somehow loses internet connectivity, when they navigate to home page and then back to a single-event, there is no data since the stream observables have been unsubscribed and the app cannot contact Firestore. Now if I do not unsubscribe, then the single-event page still displays data even if offline. This is the behavior that I want, but is it a problem somehow that I am not unsubscribing to observables when leaving single-event page?

即使在基于 Ionic 的手机应用程序中取消订阅 observables 是否重要?或者我应该重新构建我的应用程序以实现所有最佳实践?感谢您的任何投入！

Is it important to unsubscribe to observables even in an Ionic based phone app? Or should I be re-architecting my app to achieve all best practices? Thanks for any inputs!

推荐答案

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

Is it important to unsubscribe to observables even in an Ionic based phone app?

是的，否则如果你离开页面然后回来，它会创建另一个对同一个 observable 的订阅，这会导致内存泄漏.

Yes, otherwise if you were to leave the page and come back it would create another subscription to the same observable which would cause memory leaks.

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

There are a couple ways that I know of to stop subscriptions when you nav away.
1. Create, assign and unsubscribe from a Subscription.

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

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

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

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

2. Create a boolean to limit when the subscription runs.

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

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

ionViewDidLeave() {
  this.active = false;
}

对 IonicPage 组件使用 ionViewDidLeave，对自定义组件使用 ngOnDestroy.

Use ionViewDidLeave for IonicPage components and ngOnDestroy for custom components.

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

If you want data to persist while the device is offline, you should look into ngrx/store.

这篇关于离子&取消订阅可观察对象的 AngularFire2 最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！