angular - Transloco translateService.translate 在 app.component.ts 中不起作用

Question

如果我在我的 app.component.ts 构造函数中输入以下内容，它不起作用。

alert(this.translateService.translate('navigation.dashboard'));

但是，如果我在子模块中输入相同的代码，它可以正常工作。

这是我的 .json 文件:

    "navigation": {
    "dashboard": "Dashboard"
   }

在我的 app.module.ts 中，也导入了 TranslocoRootModule。

import { TranslocoRootModule } from './transloco/transloco-root.module';

imports: [
 ...  
 HttpClientModule,
 TranslocoRootModule
],

我错过了什么吗？

Answer 1

我也遇到了这个问题。我意识到，当我试图获取翻译时，transloco 文件(即 json 文件)尚未加载。似乎发出 HTTP 请求的顺序不允许在组件加载之前加载所有翻译 json 文件。

这意味着，如果您在不同的页面上，然后通过 Angular 导航到该页面，它将/将会工作(因为翻译文件已加载)。这似乎只是当前页面刷新的问题。

为了解决这个问题，这是我所做的:

...
constructor(private translocoService: TranslocoService,
  private translocoHttpLoader: TranslocoHttpLoader ...) {
...
}

ngOnInit(): void {
...
this.translocoHttpLoader.getTranslation(this.translocoService.getActiveLang())).subscribe(translation => {
  alert(translation.navigation.dashboard);
})
...
}

希望这个例子对您有所帮助。