Angular 9 rxJs-如何使用combine/merge语句检索可观察值并传递给另一个函数

Question

我有一项服务，让我打开一个小吃吧：

this.snackBarService.open(title, body);

title和body是字符串。

我遇到的问题是，它们都需要从键进行翻译，翻译服务返回一个可观察的：

  /**
   * Returns an observable for a translation based on the key
   *
   * @param key the translation key
   */
  private getTranslation(key: string): Observable<string> {
    return this.translocoService.selectTranslate(key, {}, 'auth');
  }

这个问题让我想到，在调用open方法之前，我可以使用mergeMap和combinelateest，如下所示：

  this.getTranslation('snackbars.username.success.title').pipe(
    mergeMap(title => {
      return combineLatest(
        of(title),
        this.getTranslation('snackbars.username.success.body')
      );
    }),
    map(([title, body]) => {
      console.log('here', title, body);
      this.snackBarService.open(title, body);
    })
  );

但是什么都没发生...控制台不记录任何东西：（

要订阅和取消订阅getTranslation的两个调用会有点乏味。。。那么，有没有简单的方法从可观测数据中获取值并将其传递到snackbar？

Answer 1

我相信，只有使用forkJoin，您才能做得足够多。试试下面的方法

forkJoin([
  this.getTranslation('snackbars.username.success.title'), 
  this.getTranslation('snackbars.username.success.body')
]).subscribe(
  response => {
    console.log('here', response[0], response[1]);
    this.snackBarService.open(response[0], response[1]);
  }
);

forkJoin仅当两个可观测项都完成时才发出。如果没有，则可以使用combinelatetest和管道，在take（1）中仅使用从可观察对象发出的第一个值并完成。

combineLatest([
  this.getTranslation('snackbars.username.success.title'), 
  this.getTranslation('snackbars.username.success.body')
]).pipe(
    take(1)
  ).subscribe(
  response => {
    console.log('here', response[0], response[1]);
    this.snackBarService.open(response[0], response[1]);
  }
);