时间戳

首页 > 解决方案 > 自定义管道Angular中的异步

angular - 自定义管道Angular中的异步

问题描述

我目前正在研究需要大量异步的角度自定义翻译管道。

这是我当前的代码

@Pipe({
  name: 'translatorPipe'
})
export class TranslatorPipe implements PipeTransform {

  constructor(private languageService: LanguageService) {}

  transform(input: string, ...args: unknown[]): Observable<Observable<string>> {
    let languageObservable = this.languageService.selectedLanguageObservable.pipe(map((response) => {
      let translationObservable = this.languageService.translateContent([input], response).pipe(map((translations) => {
        return this.languageService.getBestTranslationText(translations[0]);
      }));
      return translationObservable;
    }));
    return languageObservable;
  }
}

问题是：要使用这个管道，我必须将它与一个双异步管道结合起来，如下所示：

{{ post.title | translatorPipe | async | async }}

这不是很好的做法或可理解的代码。

我的问题是：我怎样才能让我的管道自给自足，这样我就不必将它与异步管道结合起来？

提前感谢您的想法

标签： angularrxjs

解决方案

这对我来说确实有点太令人费解了，可以理解。也许最好只是扩展async管道并重组您的可观察逻辑：

@Pipe({
  name: 'translator',
  pure: false,
})
export class TranslatorPipe extends AsyncPipe implements PipeTransform {
  private input$ = new ReplaySubject<string>(1);
  
  private language$ = this.ls.selectedLanguageObservable.pipe(
    switchMap((selectedLanguage) => this.input$.pipe(
      distinctUntilChanged(),
      switchMap((input) => this.ls.translateContent([input], selectedLanguage))
    )),
    map(([translations]) => this.ls.getBestTranslationText(translations)),
    shareReplay({ refCount: true, bufferSize: 1 })
  );
  
  constructor(private ls: LanguageService, cd: ChangeDetectorRef) {
    super(cd);
  }

  transform<T>(obj: Observable<T> | Subscribable<T> | Promise<T> | string): T | null;
  transform<T>(input: string): T | null {
    this.input$.next(input);
    
    return super.transform(this.language$);
  }
}

用法：

{{ post.title | translator }}

推荐阅读