时间戳

首页 > 解决方案 > 如何在嵌套的 Observables 中返回 Observable？

angular - 如何在嵌套的 Observables 中返回 Observable？

问题描述

我有两个嵌套的 observable，第一个 observable 提供了一个 ID，它作为参数传递给第二个 observable userTypeID。

目标是返回一个 Observable 基于actionTypewhich 可以是view或者edit为了做这样的事情。

// returns view object 
getPresentationFields('view').subscribe(data => console.log(data)); 

// returns edit object
getPresentationFields('edit').subscribe(data => console.log(data));

但是，由于我已经订阅了 内的 Observables getPresentationFields(...)，所以我不能订阅上面写的函数本身。

getPresentationFields(actionType: string) {
    this.customerService.getUserByID(this.id).subscribe(user => {
        this.presConfigService.getPresConfig(user.userTypeID).pipe(
            flatMap((configs) => configs),          // ----[obj1, obj2, obj3]----
            filter((configs) => configs.show)      // ----obj1----obj2----obj3----
        ).subscribe(() => {
            if(actionType == 'view'){
                // Return View Observable
            }else if(actionType == 'edit'){
                // Return Edit Observable
            }
        });
    });
}

如何根据传递给getPresentationFields('view')or的参数返回 Observable getPresentationFields('edit')？

标签： angularrxjsobserver-pattern

解决方案

无需订阅getPresentationFields代码，只需通过 Observable 即可。

粗略示例（不确定您需要返回配置的哪一部分以进行查看/编辑）

function getPresentationFields(actionType: string) {
  return this.customerService
    .getUserByID(this.id)
    .pipe(
      switchMap(user => this.presConfigService.getPresConfig(user.userTypeID)),
      flatMap((configs) => configs),
      filter((configs) => {
        if(actionType == 'view'){
          return configs.show;
        }else if(actionType == 'edit'){
          return configs.edit;
        }
      })
    )
}

或者你可以在更高的地方有一个 if-else：

function getPresentationFields(actionType: string) {
  const result$ = this.customerService
    .getUserByID(this.id)
    .pipe(
      switchMap(user => this.presConfigService.getPresConfig(user.userTypeID))
    );

 if(actionType == 'view'){
    return result$.pipe(
      // ... get view data
    );
  } else if(actionType == 'edit'){
    return result$.pipe(
      // ... get edit data
    )
  }
}

通常，您只需要在消费结果的地方订阅 Observable。

甚至可能发生您实际上并没有订阅您的代码，而是将 observable 传递给外部某处，例如使用angular | asyncor redux effects！

因此，大多数情况下，您将使用switchMap、mergeMap、combineLatest等运算符来处理您的数据并将其传递给订阅，这将变得尽可能薄。

推荐阅读