使用ngx-translate时如何让语言下拉框显示全称而非语言代码

别改addLangs里传的短语言码——这串编码是ngx-translate定位、加载对应assets/i18n下语言包的唯一标识，直接换成Italian、English这类全称会直接导致语言包加载失败。最稳妥也最好维护的方案是单独维护一份语言码和显示名称的映射关系，渲染下拉框的时候做个转换就行。

组件TS代码调整 #

先在组件里定义好语言配置列表，初始化ngx-translate的时候直接取列表里的code字段传进去就行，顺手把原来浏览器语言判断的逻辑补全——原来的正则只匹配it，用户浏览器默认语言是en的时候会被强制切回意大利语：

// 后续新增语言直接在这个数组里加配置即可
langOptions = [
  { code: 'it', label: 'Italian' },
  { code: 'en', label: 'English' }
];

ngOnInit(): void {
  // 从配置里取所有语言码注册
  this.translate.addLangs(this.langOptions.map(item => item.code));
  this.translate.setDefaultLang('it');
  const browserLang = this.translate.getBrowserLang();
  // 补全en的匹配逻辑
  this.translate.use(browserLang?.match(/it|en/) ? browserLang : 'it');
}

模板代码调整 #

下拉选项的value还是绑定语言code，保证translate.use()能正常识别切换语言，选项展示的内容取配置里的label字段就行：

<div class="dropdown-language">
    <label for="language">{{'LABEL.LINGUA' | translate }}&nbsp;</label>
    <select #langSelect (change)="translate.use(langSelect.value)" class="lang-style" id="language"> 
      <option 
        *ngFor="let lang of langOptions" 
        [value]="lang.code" 
        [selected]="lang.code === translate.currentLang">
        {{ lang.label }}
      </option>
    </select>   
</div>

进阶优化：语言名称随当前语言自适应 #

如果需要在意大利语环境下下拉选项显示Italiano、Inglese，英语环境下显示Italian、English，不用硬编码label字段，把语言名称配置到各个语言包中即可：

• 给it.json添加语言名配置：

{
  "LANG_OPTION": {
    "IT": "Italiano",
    "EN": "Inglese"
  }
}

• 给en.json添加语言名配置：

{
  "LANG_OPTION": {
    "IT": "Italian",
    "EN": "English"
  }
}

模板里把选项文本换成translate管道读取对应键值，切换语言时下拉选项的名称会自动跟随当前语言更新。

内容的提问来源于stack exchange，提问作者aulona aulona