如何將 get.pipe takeUntil 和訂閱到 Angular 中的一個 function 和 RxJX 結合起來？

Question

在Angular中，每次需要查詢一個端點時，都需要調用這段代碼：

this.service.getSomeData()
 .pipe(takeUntil(this.onDestroy$))
 .subscribe((message: any) => { 
    some code here; 
 }

takeUntil 是組件中的 function 在組件被銷毀時取消訂閱。

如何重構上面的代碼，以便每次使用資源時都不需要輸入所有這些？ 所以最后看起來像這樣（或多或少？）：

this.service.getSomeData(
   (message: any) => {
     some code here;
   }
)

Answer 1

一種選擇是在模板中使用異步 pipe 來管理訂閱

data$ = this.service.getSomeData();

並在您的模板中

<ng-container *ngIf="data$ | async as data">
  {{ data | json }}
  You can use the template variable data here that magically updates every time data$
  emits and no need to unsubscribe as the async pipe manages the subscription for you
</ng-container>

如果 observable 發出的數據不是模板所需的形狀，則使用 map function

data$ = this.service.getSomeData().pipe(map(data => functionThatTransformsData(data)));

您可以在此處閱讀我在 state 管理庫中使用的模式https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

Answer 2

通常，在從視圖/dom 卸載某些組件后，您的服務不必被銷毀/禁用。 把它們當作一層代碼來執行一些數據轉換或獲取。

---

問：為什么每個人都使用takeUntil(this.destroyed$)或this.subscription.unsubscribe() ？

答：只要至少有一個訂閱者， Observable就會存在。 因此，如果您有一些長期存在的可觀察對象在某些操作后沒有立即完成，您將有 memory 泄漏（Angular 可以多次創建/初始化每個組件）。 說到Angular的http ，所有的get ， post ， put和delete調用都是在后端調用完成后完成的。 這意味着您不必在onDestroy掛鈎中添加unsubscribe或使用takeUntil 。

如果您已建立Websocket連接並正在收聽一些消息，則您的 stream 將變得持久，並且訂閱此消息的每個組件都應在onDestroy周期內取消訂閱。 如果你不這樣做，Angular 可以多次初始化你的組件（這通常發生在*ngIf=""語句中）並且多個訂閱被創建但永遠不會被銷毀。 這會導致 memory 泄漏。

不幸的是，這是大多數 Angular 項目的常見問題，可以通過手動unsubscribe / takeUntil或使用async pipe 在組件被銷毀后自動執行unsubscribe來解決。

Answer 3

我很高興你問這個，我遇到了這個Angular AutoUnsubscribe （我引用這個是因為我發現實現這個的邏輯真的很漂亮。）

它相對易於使用，並且適用於所有可聲明對象（顯然是管道、指令和組件。）

現在省略訂閱和取消訂閱部分（我不會建議），它非常簡單，直截了當。

早些時候你有類似的東西

getSomeData(): Observable<any> {
  // for eg
  return this.http.get();
}

您必須將其更改為：

getSomeData(callback, onDestroy$): Observable<any> {
  this.http.get(...).pipe(takeUntil(onDestroy$)).subscribe(val => callback(val));
}

然后我們就能得到我們最終想要的東西。 干杯。