ngx-translate:重新加载时不显示翻译

Question

在我的webapp中，我使用ngx-translate模块进行本地化。对于我使用管道翻译的html字符串，它工作得很好。我在我的ts组件中翻译字符串时遇到了问题。字符串得到翻译，但如果我重新加载页面，它们是空字符串，如果我转到应用程序中的其他页面并返回，它们又是正常的。我已经定义了方法：

public getTranslation(key: string){
    let str="";
    this.translate.get(key).subscribe(value => {str = value});
    return str;
}

因此，当我定义变量时，我使用：

variable: string = this.getTranslation("key-in-my-json-file")

我在app.module中的配置，加载器：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

在导入中：

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

我在package.json中的版本：

"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^1.0.2",
"typescript": "2.5.2"

和angular版本4.3.6

Answer 1

尝试使用localStorage。例如，当我更改语言时，我在函数中使用它：

public changeLanguage(lang) {
  this.languageActive = lang;
  this.translateService.use(lang);
  localStorage.setItem("language", this.languageActive);
}

Answer 2

用最小的超时包围这条线，然后它就会起作用。

setTimeout(()=> {
          variable: string = this.getTranslation("key-in-my-json-file");  
}, 500);