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

Question

使用 ngx-translate 库进行本地化。它在我放置的组件中工作正常。 场景： 我已经为 select 语言下拉列表创建了一个组件，我在登录组件中调用该组件并在那里使用。它工作正常。现在，我想在登录后将 selected 语言传输到所有其他组件。

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

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: The lang currently used

要在其他组件中使用它，您当然需要导入 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>

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

How to pass and translate with the language selected option in other component using ngx-translate

ngx-translate

angular