自定义管道角度中的异步

Question

我目前在一个角度自定义翻译管道工作，它需要大量的异步。

以下是我当前的代码

@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 }}

这并不是很好的实践，也不是可以理解的代码。

我的问题是:我如何让我的管道自给自足，这样我就不必将它与异步管道结合起来？

预先感谢您的想法

Answer 1

这对我来说确实有点太复杂了，我可以理解。也许最好的方法就是扩展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 }}