RxJS - 只訂閱一次但不完成Observable

Question

想象一下當你有一些Observable包含實時變化的數據時的情況，例如下面......

interface User {
   name: string;
   projectId: string;
   dataThatChangesALotInRealTime: Object;
}

userData: Observable<User>

此組件中使用此userData observable來顯示實時更改的某些數據。 例如

<p>
{{ (userData | async)?.dataThatChangesALotInRealTime }}
</p>

現在我想根據userData observable中的當前數據向數據庫插入一些數據。 這是功能

addToDatabase() {
  let sub = this.userData.subscribe(data => {
     this.exampleDatabase.doc(`test/${data.dataThatChangesALotInRealTime.id}`)
          .add({ test: 'hello'})
     sub.unsubscribe() // <- This
  })
}

題

這是取消訂閱內部訂閱以避免多次插入數據庫的正確解決方案嗎？ 有沒有不同/更好的方法來做到這一點？

這只是簡約的例子，如果你有一些問題或我的解釋很差，請在評論中告訴我，我會更新我的問題。 謝謝

Answer 1

您可以使用第first運算符：

this.userData.pipe(first()).subscribe(...);

這將在第一個值發出后自動完成（因此取消訂閱）。

請注意，您應確保在完成之前至少發出一次，否則將引發錯誤。 如果你不能確保這一點，你可以使用take(1)代替：

this.userData.pipe(take(1)).subscribe(...);

請注意，這實際上並不直接修改userData observable，因此其他訂閱將繼續發出，無論如何。 這是因為rxjs中的運算符不會修改observable，而是返回一個新的observable。

Answer 2

你可以使用takeUntill Operator。 它需要第二個Observable作為參數，它監視第二個Observable並在它發出值或終止后丟棄訂閱。

export class TakeUntilCardComponent implements OnInit, OnDestroy {
  message: string;
  private unsubscribe$ = new Subject();
  constructor(private upperCaseService: UpperCaseService) {}

  ngOnInit() {
    this.upperCaseService.getUpperCaseMessage()
      .takeUntil(this.unsubscribe$)
      .subscribe((message: string) => this.message = message);
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

這是功能齊全的演示

如果你想推薦它，還有一個非常好的博客！ 不要取消訂閱