訂閱的角度返回結果為 Observable

Question

我有一個組件，在單擊按鈕時從StorageManagerService調用save()方法：

// component.ts
onSaveClick(): void {
  this.storageManager
    .save(<objectToSave>)
    .pipe(take(1))
    .subscribe({
      next: (success: boolean) => {
        if (success) {
          // do stuff
        } else {
          // do other stuff
        }
      },
    });
}

該 storageManager 是另一個處理條件邏輯的服務的適配器。 因此StorageManagerService.save()如下所示：

// StorageManagerService
save(<objectToSave>): Observable<boolean> {
  if (<someCondition>) {
    this.modalService
      .openDialogWithComponent(
        SaveSystemContainerComponent,
        { data: { <someData> } },
        this.matDialog
      )
      .afterClosed()
      .pipe(take(1))
      .subscribe({
        next: (success: boolean) => {
          if (success) {
            // special handling

            return this.localStorageService.save(<objectToSave>);
          }

          return of(false);
        },
      });
  }
  else {
    return this.localStorageService.save(<objectToSave>);
  }
}

而LocalStorageManagerService有存儲數據的具體實現：

// LocalStorageManagerService
save(<objectToSave>): Observable<boolean> {
  if (this.storageAvailable()) {
    localStorage.setItem(<objectToSave>.id, JSON.stringify(<objectToSave>));
    return of(true);
  }

  console.error('local storage not available or disabled');
  return of(false);
}

LocalStorageService繼承自所有存儲服務都必須實現的抽象類。 思路是，以后從localStorage遷移到實際的數據庫時，我只需要改變StorageManagerService的變量，不必修改應用程序中的20多個地方。

我遇到的問題是，在某些情況下，用戶必須輸入額外的數據才能存儲它。 該輸入通過模態出現發生。 現在 TypeScript 告訴我StorageManagerService中的 if-case 不返回任何內容（這是正確的）。

如何將StorageManagerService subscribe.next()的結果返回給調用函數？ 我想我缺少一個 rxjs 運算符。

Answer 1

如果有人訂閱保存，您可以將該方法重構為：

save(objectToSave): Observable<boolean> {
  if (someCondition) {
    return this.modalService
      .openDialogWithComponent(
        SaveSystemContainerComponent,
        { data: { someData } },
        this.matDialog
      )
      .afterClosed()
      .pipe(
        take(1),
        switchMap((success: boolean) => {
          if (success) {
            // special handling

            return this.localStorageService.save(objectToSave);
          }
          return of(false);
        })
      );
  } else {
    return this.localStorageService.save(objectToSave);
  }
}

此外，您的LocalStorageManagerService應該只在訂閱save返回時執行實際save ，而不僅僅是在調用save時：

save(objectToSave): Observable<boolean> {
  return defer(() => {
    if (this.storageAvailable()) {
      localStorage.setItem(objectToSave.id, JSON.stringify(objectToSave));
      return of(true);
    }

    console.error('local storage not available or disabled');
    return of(false);
  });
}