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 => ...)

官方文件