TranslocoCurrenyPipe NullInjectorError

Question

我目前正在尝试升级我们项目中的 Transloco 版本。之前我们使用的是 Transloco 4.3.0 和 Transloco-MessageFormat 4.1.0。 目标是将它们升级到最新版本 (7)。

正如 v5 的重大更改中所述，我更改了提供方式，就像新方式应该的那样。请参阅 TranslocoRootModule：

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

就目前情况而言，TranslocoCurrenyPipe 在模板内使用时工作得非常好。但在某些情况下，我们还需要在组件或服务的 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)

我知道这很少。遗憾的是，我无法完成构建你们的示例项目，因为我无法以相同的方式设置它，这会导致相同的错误。我尝试过，但遗憾的是失败了。 此外，由于一些限制，无法与您分享整个项目。

所以这更像是万福玛丽，希望你们能从这些信息中看到这个问题是一种绝望的行为。也许你能帮忙。 如果需要的话我可以提供更多信息。

干杯 诺亚

Answer 1

没有记录，但在幕后货币管道使用

TranslocoLocaleService

。在 TypeScript 代码中，更好的做法是直接使用服务而不是注入管道：

export class MyComponent {
  constructor(private readonly localeService: TranslocoLocaleService) {}

  getPrice() {
    const priceStr = `${this.localeService.localizeNumber(
      price,
      'currency',
      undefined,
      {
        currency: data.price.total.currency,
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      },
    )}`;
  }
}

这需要一些重构。