Angular/Ngx translate: 动态显示从服务器获取的currentLang

Question

我正在制作一个允许使用服务器上的数据翻译应用程序的项目。

我创建了一个服务来获取所需的数据：

@Injectable()
export class TranslationService {

  constructor(private http: HttpClient) { }

  getLangs(): Observable<string[]> {
    return this.http.get<string[]>(TRANSLATION_URL);
  }

  getDefaultLang(): Observable<string> {
    return this.http.get<string>(TRANSLATION_URL + '/defaultLang');
  }

  changeStartLang(lang: string) {
    this.http.post(TRANSLATION_URL + '/defaultLang', lang);
  }

}

getDefaultLang() returns 正文如下的响应：

"en"

在 app.component 中，我使用默认语言初始化应用程序：

// get available langs from server and start language
      this.translationService.getLangs()
      .toPromise().then(langs => translate.addLangs(langs));
      translate.setDefaultLang('en');
      const browserLang = translate.getBrowserLang();
      this.translationService.getDefaultLang()
      .toPromise().then(lang => (lang !== null) ? this.translate.use(lang) : this.translate.use(browserLang));

在另一个组件中，我想显示来自 TranslateService 的当前语言：

<div>{{'LANGUAGE.LANGUAGE_IN_USE' | translate}}</div>
<div (click)="changeLanguage()">{{translate.currentLang | uppercase}}</div>

函数 changeLanguage() 允许在不同语言之间切换。

当我打开这个组件时，我得到 currentLang 的未定义，一旦我调用函数 changeLanguage()，语言就会很好地显示。

我该如何解决这个问题？

Answer 1

找到解决方案。将服务器的响应更改为：

{ "lang": "en" }

使用 getDefaultLang():

getDefaultLang(): Observable<any> {
    return this.http.get(TRANSLATION_URL + '/defaultLang');
  }

并将app.component中的代码改为：

const browserLang = translate.getBrowserLang();
      this.translationService.getDefaultLang()
      .toPromise().then(res => (res.lang !== null) ? this.translate.use(res.lang) : this.translate.use(browserLang))
      .catch(error => console.log(error));

它解决了我所有的问题，translate.currentLang 在启动时不再是未定义的。

Angular/Ngx translate: 动态显示从服务器获取的currentLang

Angular/Ngx translate: display dynamically currentLang obtained from a server

ngx-translate

angular