Angular return 作为 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 继承自所有存储服务都必须实现的抽象 class。想法是，以后从localStorage迁移到实际数据库时，我只需要更改StorageManagerService中的变量，而不必修改应用程序中的20+个地方。

我遇到的问题是，在某些情况下，用户必须先输入额外的数据，然后我才能存储它。该输入通过模态出现发生。现在 TypeScript 告诉我 StorageManagerService 中的 if-case 没有 return 任何东西（这是正确的）。

如何将 StorageManagerService 中 subscribe.next() 的结果 return 传递给调用函数？我想我缺少一个 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 的 return 时进行实际保存，而不仅仅是在调用 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);
  });
}

Angular return 作为 Observable 订阅的结果

Angular return result of Subscription as Observable

subscription

observable

rxjs

angular