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中的配置，loader：

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"

和角度版本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);

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

2 个答案: