typescript 如何在执行方法后执行管道并将数据存储在行为主体中?

wnvonmuf  于 2023-03-31  发布在  TypeScript
关注(0)|答案(1)|浏览(92)

我正在做一个Angular 项目,并试图创建一个翻译管道,在那里我将在数据库中存储翻译,我将在一个服务中创建一个BehaviorSubject,调用后端API来存储此BehaviorSubject中的所有翻译,我将订阅它,在管道中从其阅读而不是每隔一段时间调用后端API。问题是,当我在BehaviorSubject中调用服务器内部加载存储翻译的方法时,在app.Component中的ngOnInit内部调用,在它完成执行之前,它调用了管道,所以BehaviorSubject仍然没有数据所以它不会工作。我需要管道等待,直到我在BehaviorSubject中填充数据

jv4diomz

jv4diomz1#

在switchMap操作符中,您可以定义一个函数,用于检查BehaviorSubject中是否有可用的翻译。(),它从后端获取翻译并将其存储在BehaviorSubject中。然后map函数返回处理后的数据。如果翻译已经可用,该函数使用OF运算符返回具有经处理的数据的数据流。

export class TranslatePipe implements PipeTransform {
  private translations: any;

  constructor(private readonly myTranslationService: MyTranslationService) {}

  transform(value: string): any {
    return this.myTranslationService.translations$.pipe(
      switchMap((translations) => {
        if (!translations) {
          return this.myTranslationService.loadTranslations().pipe(
            map(() => {
              return this.myTranslationService.getTranslations()[value] || value;
            })
          );
        } else {
          return of(translations[value] || value);
        }
      })
    );
  }
}

相关问题