RXJS - Angular - 取消訂閱主題

Question

如本主題所述 ，在Angular 5+中取消訂閱Observables的“官方”解決方案通常是使用takeUntil。 到現在為止還挺好。 我的問題是，如果我訂閱的Observable實際上是一個主題，這是否也適用？

Answer 1

一旦你在任何事情上調用.subscribe() （主題也是如此），需要確保訂閱被取消訂閱。

處理有限Observables ：如果您訂閱了有限可觀察量（意味着具有有限/有限序列的可觀察量），則最后一條消息將發送結束信號，並且訂閱將自動取消。 這方面的例子是：

Observable.of(100)
Observable.from([1,2,3,4])

在有限觀察量的例子是：

Observable.fromEvent(document, 'click')
Observable.timer(1000)

呼叫/管道.first() .take(number)或.takeWhile(condition that will evaluate to false at some point)或takeUntil(observable that emits a value)上可觀察到的將全部變為一個無限否則可觀察到有限一個。

停止調用.subscribe（） ：另一種不必取消訂閱的流行方法是首先不訂閱。 這可能聽起來很愚蠢，因為你什么時候想要一個你不訂閱的觀察者？ 好吧，如果您只需要將一些數據傳遞給您的view / html模板，那么將observable傳遞到異步管道中會將取消訂閱問題傳遞給異步管道本身。

html模板中的典型示例：

<h1>Editing {{ infiniteObservable$ | async }}<h1>
<li *ngFor="let user of userObservable$ | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

手動取消訂閱 ：最后，您可以選擇保留對所有訂閱的引用。 您不必保留指向每個訂閱的變量，只需使用單個Subscription對象來跟蹤所有訂閱，然后立即取消訂閱所有訂閱。 這是一個例子：

const subscriptions = new Subscription();
subscriptions.add(observable1$.subscribe());
subscriptions.add(observable2$.subscribe());
subscriptions.unsubscribe();

快速總結 ，如何處理取消訂閱，以下任何方法：

1. 將無限可觀測值轉換為有限值，從而無需取消訂閱（使用.takeUntil(this.destroyed$)並在this.destroyed$.emit()中執行this.destroyed$.emit() ngOnDestroy() ）。
2. 避免訂閱，並通過async管道傳遞observable。
3. 保留對任何訂閱的引用，並在ngOnDestroy()方法中調用.unsubscribe() 。

我個人傾向於只使用兩種方法中的一種。

Answer 2

我有一些要補充的東西。 Subject在內部存儲訂閱者（ Observable也是如此）。 如果Subject是組件的一部分（在內部創建，存儲為屬性或在閉包中），則主題及其訂閱將與組件本身一起進行垃圾收集。

但這是一個特例，應該非常小心：一切都必須包含在組件中。

這是如安全不是來自退訂FormControl.valueChanges如果僅在組件中使用可觀察到的。

但為了安全起見，並且不想考慮它，只需使用takeUntil 。