时间戳

首页 > 解决方案 > Angular / RXJS - 如何在 switchMap 之后执行逻辑

angular - Angular / RXJS - 如何在 switchMap 之后执行逻辑

问题描述

在我的一个组件中，我有一个函数可以更新本地 observable ( album$)，然后在我的 html 中使用它来显示数据 ( *ngIf="album$ | async as album")。这工作得很好。

  getData() {
    this.album$ = this._activatedRoute.params.pipe(
      tap(params => {
        // Update variables
      }),
      switchMap(params => {
        return this.service.getData(params.id, params.id2);
      })
    )
  }

但是，一个新要求意味着我需要更新我在其中一项服务中拥有的 BehaviorSubject。上面的功能似乎是一块石头杀死两只鸟的好地方。

我想执行一个patchValueandthis.service.obs$.next一旦上面的函数返回它的数据。

我确实在我拥有的单独组件中实现了此功能，但由于我没有在上述组件中使用订阅，我将如何超越添加this.service.album$.next(data);到我的上述功能？

// 另一个具有我非常喜欢的功能的函数示例，但它是基于订阅的。

  getData(){
    this._subscription = this._activatedRoute.params.pipe(
      tap(params => {
        // update variables
      }),
      switchMap(params => {
        return this.service.getData(params.id1, params.id2);
      })
    ).subscribe(data => {
      if (data) { 
        this.service.obs$.next(data);
      } 
    });
  }

标签： angularrxjsrxjs-observables

解决方案

您可以通过管道输入tap或map连接到内部可观察对象。尝试以下

getData() {
  this.album$ = this._activatedRoute.params.pipe(
    tap(params => {
      // update variables
    }),
    switchMap(params => {
      return this.service.getData(params.id, params.id2).pipe(
        tap(data => {
          this.service.obs$.next(data);
          // patch value
          // do something else
        })
      );
    })
  );
}

推荐阅读