如何使用 ngx-translate 传递和翻译其他组件中的语言选择选项

Question

使用 ngx-translate 库进行本地化。它在我放置的组件中运行良好。 场景： 我已经为选择语言下拉菜单创建了一个组件，我在 Login 组件中调用该组件并在那里使用。它工作正常。现在，我想在登录后将选择的语言转移到所有其他组件。

我不想在每个地方都使用选择语言选项。在登录页面中选择的语言也应该反映在其他页面上。我怎样才能做到这一点？ （我现在没有其他模块）

i18nService.ts：

currentLang = 'en';
  translateService: TranslateService;

  setSelectedLanguage(language:any) {
    this.currentLang = language;
    this.applyLanguage(this.currentLang);
  }
  private applyLanguage(language:any) {
    this.translateService.use(language);
  }
  getLanguages() {
    return this.translateService.getLangs();
  }

  constructor(translateService: TranslateService) {
    this.translateService = translateService;
  }

  setUpConf() {
    this.translateService.addLangs(['en', 'te', 'kn', 'hi']);
    this.translateService.setDefaultLang(this.currentLang);
    this.applyLanguage(this.currentLang);
  }

LanguageDropdown.ts

i18nConf: I18nConfigService;

  constructor(i18nConf: I18nConfigService) { 
    this.i18nConf = i18nConf;
    this.i18nConf.setUpConf();
  }

LanguageDropdown.html

<select class="form-input col-md-2" #langSelect
        (change)="i18nConf.setSelectedLanguage(langSelect.value)">
        <option *ngFor="let lang of i18nConf.getLanguages()" [value]="lang"
            [selected]="lang === this.i18nConf.currentLang">
            {{ lang }}</option>
</select>

Answer 1

您实际上可以通过TranslateService 获取使用的语言。在 API 中，您有 currentLang 属性，它应该为您提供当前应用的语言：https://github.com/ngx-translate/core#properties

currentLang：当前使用的语言

要在其他组件中使用它，当然需要导入TranslateService。

要使用你需要这样称呼它：

// This will contain the currently set language
const currentLang = this.translateService.currentLang; 

如果你想翻译东西，你有多种方法。一种方法是get 方法。

this.translateService.get('Message Not Found').subscribe(translation => {
  console.log(translation); // Here should be the translation
});

另一种方式（我的首选方式）是使用translate 管道：

<button mat-raised-button
        color="primary"
        (click)="confirm()">
  {{ 'Yes' | translate }}
</button>