angular - ngx-translate: các bản dịch không hiển thị khi tải lại

Trong ứng dụng web của tôi, tôi sử dụng module ngx-translate để đa ngôn ngữ. Nó hoạt động tốt với các chuỗi HTML mà tôi dịch bằng pipes. Tôi gặp vấn đề với các chuỗi được dịch trong các component ts của tôi. Các chuỗi được dịch nhưng nếu tôi tải lại trang, chúng là các chuỗi trống, nếu tôi đi đến trang khác trong ứng dụng và quay lại, chúng lại bình thường. Tôi đã định nghĩa phương thức:

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

Vì vậy khi tôi định nghĩa các biến, tôi sử dụng:

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

cấu hình của tôi trong app.module, trình tải:

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

và trong các nhập khẩu:

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

các phiên bản của tôi trong package.json:

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

và phiên bản Angular 4.3.6

Câu trả lời #1

Hãy thử sử dụng localStorage. Ví dụ, tôi sử dụng nó trong một hàm khi thay đổi ngôn ngữ:

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

Câu trả lời #2

Bao quanh dòng với thời gian chờ tối thiểu thì nó sẽ hoạt động.

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