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文件。

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

为了绕开这件事，我做了这样的事：

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

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

希望这个例子有帮助。