时间戳

首页 > 解决方案 > Angular 9 rxJs - 如何使用组合/合并语句来检索可观察值并传递给另一个函数

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

问题描述

我有一项服务可以让我打开一个小吃店：

this.snackBarService.open(title, body);

title并且body是字符串。

我遇到的问题是它们都需要从键中翻译，并且翻译服务返回一个 Observable：

  /**
   * 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：combineLatest

  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 的两个调用会有点乏味......那么有没有一些简单的方法可以从两个 observable 中获取值并将它们传递给snackbar？

标签： angularrxjs

解决方案

我相信您只需使用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仅在两个可观察对象都完成时才发出。如果不是，那么您可以使用combineLatest和管道 atake(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]);
  }
);

推荐阅读