angular - ngx-translate：重新載入時翻譯無法顯示

在我的網頁應用中，我使用 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

答案＃1

嘗試使用 localStorage。例如，我在更改語言的函數中使用它：

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

答案＃2

用最小的超時時間包圍該行，這樣就可以工作了。

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