Transloco 翻译第一次不起作用

Question

这是我的 Transloco 配置：

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [ TranslocoModule ],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'es'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
  ]
})
export class TranslocoRootModule {}

当我尝试使用翻译方法进行翻译时，它第一次不起作用。

constructor(
    private translate: TranslocoService
  ) {
    console.log('<< ', this.translate.translate('dashboard.label'));
  }

如果我通过路由器移动到另一条路线并返回，文本就会被翻译。似乎您第一次加载应用程序时没有时间加载翻译。有没有办法来解决这个问题？预先感谢。

Answer 1

正如文档所述：

请注意，为了安全地使用此方法，您有责任 确保翻译文件已成功加载 被调用的时间。如果您不确定，您可以使用 改为 selectTranslate() 方法

此方法返回一个可观察值：

translocoService.selectTranslate('hello').subscribe(value => ...)
translocoService.selectTranslate('hello', { value: 'world' }).subscribe(value => ...)
translocoService.selectTranslate('hello', {}, 'en').subscribe(value => ...)

官方文档

Answer 2

创建一个加载语言数据的工厂函数，并将该函数提供给

APP_INITIALIZER

DI 代币。该函数将在应用程序引导过程中执行，所需的翻译将在启动时可用。

这是 Transloco 的示例：

export function appInitializerFactory(translateService: TranslocoService) {
  return (): Promise<Translation> => {
    return lastValueFrom(translateService.load('en'))
  }
}

@NgModule({
  ...
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslocoService],
      multi: true
    },
    ...
  ],

  bootstrap: [AppComponent]
})
export class AppModule {}

您可以在此处阅读有关 Angular APP_INITIALIZER 注入令牌的更多信息