如何实现支持异步请求的Angular自定义Culture管道？

没问题，这完全可以实现！Angular的自定义管道本身是同步执行的，但我们可以通过让管道返回Observable或Promise，再配合内置的async管道，就能达成你要的异步渲染效果。下面是具体的实现方案和细节：

PipeTransform的transform方法确实不支持直接写async/await，但它允许返回Observable或Promise类型的值——而Angular的async管道正好可以自动订阅这类异步对象，待数据返回后再渲染结果。所以我们的实现逻辑是：

1. 自定义culture管道，在transform方法中发起异步请求（HTTP/本地数据库），返回一个Observable
2. 在模板中把culture管道和async管道链式使用，让async处理订阅和渲染

1. 创建CulturePipe自定义管道 #

import { Pipe, PipeTransform } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { TranslationService } from './translation.service'; // 自定义的翻译请求服务

@Pipe({
  name: 'culture',
  pure: true // 设为纯管道，避免参数不变时重复发起请求
})
export class CulturePipe implements PipeTransform {
  // 缓存已请求过的翻译结果，减少重复网络/DB请求
  private translationCache = new Map<string, Observable<string>>();

  constructor(private translationService: TranslationService) {}

  transform(key: string, locale: string): Observable<string> {
    const cacheKey = `${key}-${locale}`;
    
    // 优先从缓存取结果
    if (this.translationCache.has(cacheKey)) {
      return this.translationCache.get(cacheKey)!;
    }

    // 发起异步请求（模拟从服务器/本地DB获取翻译）
    const translation$ = this.translationService.fetchTranslation(key, locale).pipe(
      map(translation => translation || key), // 无翻译结果时返回原key
      catchError(() => of(key)) // 请求失败时返回原key，避免页面报错
    );

    // 存入缓存
    this.translationCache.set(cacheKey, translation$);
    return translation$;
  }
}

2. 实现翻译请求服务（模拟异步调用） #

import { Injectable } from '@angular/core';
import { Observable, of, delay } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TranslationService {
  // 模拟从远程服务器或本地数据库获取翻译的异步方法
  fetchTranslation(key: string, locale: string): Observable<string> {
    // 模拟网络延迟
    return of(this.getMockTranslation(key, locale)).pipe(delay(300));
  }

  private getMockTranslation(key: string, locale: string): string | null {
    const translationMap = {
      'hello': {
        'es-mx': 'Hola',
        'fr-fr': 'Bonjour',
        'zh-cn': '你好'
      }
    };
    return translationMap[key]?.[locale] || null;
  }
}

3. 模板中的使用方式 #

<!-- 必须配合async管道，才能渲染异步返回的结果 -->
<p>{{ 'hello' | culture:'es-mx' | async }}</p>
<!-- 输出：Hola -->

<p>{{ 'hello' | culture:'zh-cn' | async }}</p>
<!-- 输出：你好 -->

• 缓存机制：一定要加入缓存逻辑，否则每次变更检测都会发起新的异步请求，严重影响性能
• 错误处理：异步请求可能失败，要在管道中做好错误兜底，避免页面因请求失败出现异常
• 纯管道设置：设为pure: true时，只有当key或locale变化时才会重新执行transform，性能更优；如果需要响应翻译数据的动态更新，可以改为pure: false，但要注意性能损耗

内容的提问来源于stack exchange，提问作者X Pahadi