ngx-translate语言选择下拉框如何将显示值从语言代码改为完整名称

解决方案 #

你只需要额外新增一层语言码和显示名称的映射即可，无需修改addLangs的入参（该参数值需要和语言包文件名对应，确实不能修改），具体修改如下：

1. 修改 app.component.ts 代码

新增映射对象，原有添加语言的逻辑保持不变：

// 新增语言码与显示名称的映射
public langDisplayMap: Record<string, string> = {
  'en': 'English',
  'es': 'Espanol',
  'fr': 'Francais'
};

// 原有代码无需改动
this.translate.addLangs(['en', 'es', 'fr']);

2. 修改 component.html 模板

将下拉选项的显示值替换为从映射对象中取值即可：

<select class="form-control" selLang (change)="translateLanguageTo(selLang.value)">
    <option *ngFor="let language of translate.getLangs()" [value]="language" [selected]="language === translate.currentLang">
        <!-- 从映射中取显示名，加兜底避免未配置的语言显示为空 -->
        {{ langDisplayMap[language] || language }}
    </option>
</select>

实现说明

addLangs方法传入的语言码是ngx-translate用来匹配对应语言包文件的标识，和显示逻辑完全解耦，新增的映射层只负责控制前端显示内容，不会影响语言包的加载逻辑。后续新增语言时，只需要同步在langDisplayMap中新增对应的键值对、在addLangs的入参数组中新增对应语言码即可。

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