Angular自定义翻译Pipe如何无需额外Async pipe即可独立运行？

你的管道当前返回的是嵌套的Observable结构：Observable<Observable<string>>，第一层是语言切换的监听流，第二层是翻译请求的结果流，所以才需要连续调用两次async管道分别订阅两层流。

方案1：打平Observable，仅需单次async（最符合Angular最佳实践） #

不需要完全去除async，先通过高阶操作符把嵌套流打平，仅保留一层Observable，是官方推荐的低风险方案，不会引入手动订阅的内存泄漏隐患：

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

  constructor(private languageService: LanguageService) {}

  transform(input: string, ...args: unknown[]): Observable<string> {
    // 用switchMap替换内层map，自动打平嵌套Observable，切换语言时还会自动取消未完成的旧翻译请求
    return this.languageService.selectedLanguageObservable.pipe(
      switchMap(selectedLang => this.languageService.translateContent([input], selectedLang)),
      map(translations => this.languageService.getBestTranslationText(translations[0]))
    );
  }
}

优化后调用仅需单次async管道：

{{ post.title | translatorPipe | async }}

方案2：管道内部自主订阅，完全无需async #

如果要彻底简化调用侧代码，不需要额外加async管道，可以将管道设置为非纯模式，内部自主管理订阅、内存清理和视图更新：

import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Pipe({
  name: 'translatorPipe',
  pure: false // 必须设为非纯，才能在异步结果返回后触发视图更新
})
export class TranslatorPipe implements PipeTransform, OnDestroy {
  private translatedText: string = '';
  private subscription?: Subscription;
  private lastInput?: string;
  private lastCachedLang?: string;

  constructor(
    private languageService: LanguageService,
    private cdr: ChangeDetectorRef // 注入变更检测器，手动通知视图更新
  ) {}

  transform(input: string, ...args: unknown[]): string {
    // 相同输入和语言直接返回缓存结果，避免重复发起请求
    if (input === this.lastInput && this.languageService.currentLang === this.lastCachedLang) {
      return this.translatedText;
    }

    // 清理之前的订阅，避免内存泄漏
    this.subscription?.unsubscribe();
    this.lastInput = input;
    this.lastCachedLang = this.languageService.currentLang;

    this.subscription = this.languageService.selectedLanguageObservable.pipe(
      switchMap(selectedLang => {
        this.lastCachedLang = selectedLang;
        return this.languageService.translateContent([input], selectedLang);
      }),
      map(translations => this.languageService.getBestTranslationText(translations[0]))
    ).subscribe(text => {
      this.translatedText = text;
      this.cdr.markForCheck(); // 通知Angular更新当前视图
    });

    return this.translatedText;
  }

  ngOnDestroy(): void {
    // 管道销毁时清理残留订阅
    this.subscription?.unsubscribe();
  }
}

优化后调用侧无需加任何async管道：

{{ post.title | translatorPipe }}

注意：非纯管道会在每一轮变更检测都执行transform方法，所以必须增加输入缓存逻辑，避免频繁发起翻译请求影响页面性能。

内容的提问来源于stack exchange，提问作者Benoit Bonavia