升级Transloco至v7后TranslocoCurrencyPipe注入NullInjectorError问题

问题背景 #

将项目中Transloco从4.3.0、Transloco-MessageFormat从4.1.0版本升级至v7，已按照v5版本破坏性变更说明调整提供者配置：

@NgModule({
    imports: [],
    exports: [TranslocoModule],
    providers: [
        provideTransloco(
            {
                config: {
                    availableLangs: ['de', 'en'],
                    defaultLang: 'de',
                    missingHandler: {
                        allowEmpty: true,
                    },
                    reRenderOnLangChange: true,
                    prodMode: false,
                },
                loader: TranslocoHttpLoader
            }
        ),
        provideTranslocoMissingHandler(TranslocoCustomMissingHandler),
        provideTranslocoMessageformat({locales: ['de-DE']}),
        provideTranslocoLocale({defaultLocale: 'de-DE'}),
    ],
})
export class TranslocoRootModule { ... }

目前TranslocoCurrencyPipe在模板中使用完全正常，但在组件或服务的TS文件中注入使用时（升级前可正常工作），出现注入错误。相关注入及使用代码：

constructor(
    private readonly currencyPipe: TranslocoCurrencyPipe
) { ... }

const priceStr = `${this.currencyPipe.transform(
    price,
    'symbol',
    { minimumFractionDigits: 0, maximumFractionDigits: 0 },
    data.price.total.currency,
)}`;

报错信息 #

ERROR NullInjectorError: R3InjectorError(AppModule)[GoogleMapsService -> TranslocoCurrencyPipe -> ChangeDetectorRef -> ChangeDetectorRef]: 
  NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.get (core.mjs:1662:27)
    at R3Injector.get (core.mjs:3108:33)
    at R3Injector.get (core.mjs:3108:33)
    at injectInjectorOnly (core.mjs:1106:40)
    at ɵɵinject (core.mjs:1112:60)
    at inject (core.mjs:1198:12)
    at <instance_members_initializer> (jsverse-transloco-locale.mjs:878:17)
    at new BaseLocalePipe (jsverse-transloco-locale.mjs:876:1)
    at new TranslocoCurrencyPipe (jsverse-transloco-locale.mjs:897:1)
    at BaseLocalePipe_Factory (jsverse-transloco-locale.mjs:890:16)

解决方案 #

• 原因：Angular的ChangeDetectorRef仅在组件注入器中可用，服务无法直接获取。Transloco v7中TranslocoCurrencyPipe继承自BaseLocalePipe，依赖ChangeDetectorRef，因此不能直接在服务中注入使用。
• 推荐方案：使用TranslocoLocaleService替代管道，它是专为TS逻辑设计的工具类，无需依赖ChangeDetectorRef：
  1. 注入TranslocoLocaleService：

     constructor(private readonly localeService: TranslocoLocaleService) { ... }
     

  2. 调用formatCurrency方法实现相同功能：

     const priceStr = this.localeService.formatCurrency(
         price,
         data.price.total.currency,
         'symbol',
         { minimumFractionDigits: 0, maximumFractionDigits: 0 }
     );
     

• 组件内替代方案：若需在组件中保留管道使用，可手动创建实例并传入组件的ChangeDetectorRef：

  private currencyPipe: TranslocoCurrencyPipe;
  
  constructor(private cdr: ChangeDetectorRef) {
      this.currencyPipe = new TranslocoCurrencyPipe(cdr);
  }
  
  // 使用后在ngOnDestroy中清理（可选）
  ngOnDestroy() {
      this.currencyPipe.destroy();
  }
  

内容的提问来源于stack exchange，提问作者Noah Plum