ngx-translate - 更改语言选择下拉菜单中的显示值答案

【问题标题】：ngx-translate - Change displayed value in language select dropdownngx-translate - 更改语言选择下拉菜单中的显示值
【发布时间】：2021-09-21 17:02:12
【问题描述】：

这似乎是一件相对简单的事情，但我似乎找不到任何人这样做的示例（Stackblitz、博客、ngx-translate 文档等），而且我自己也无法解决。

我想将下拉菜单的显示值从“en”、“es”、“fr”更改为“English”、“Espanol”、“Francais”。更改 addLangs() 中的值似乎会更改下拉列表中的值，但它当然找不到 en.json 等。

component.html

<select class="form-control" selLang (change)="translateLanguageTo(selLang.value)">
    <option *ngFor="let language of translate.getLangs()" [value]="language" [selected]="language === translate.currentLang">
        {{ language }}
    </option>
</select>

app.component.ts

this.translate.addLangs(['en', 'es', 'fr']);

【问题讨论】：

标签： html angular typescript ngx-translate

【解决方案1】：

正如您自己所注意到的，ngx-translate 只关心语言代码而不关心它们的名称。不过你可以解决这个问题。

创建一个包含所有支持的语言（语言代码+语言名称）的常量。

// supported-languages.ts
export const SUPPORTED_LANGUAGES = [
  { code: 'en', name: 'English' },
  { code: 'es', name: 'Espanol' },
  { code: 'fr', name: 'Francais' },
]

将该常量导入到您的组件中。

// language-selector.component.ts
import { SUPPORTED_LANGUAGES } from './path/to/supported-languages';

class LanguageSelectorComponent {
  languages = SUPPORTED_LANGUAGES
  
  // ... rest of the methods
}

遍历支持的语言并显示它们的名称。

<!-- my.component.html -->
<select class="form-control" (change)="translateLanguageTo($event)">
    <option *ngFor="let language of languages" [value]="language.code" [selected]="language.code === translate.currentLang">
        {{ language.name }}
    </option>
</select>

并在您的app.component.ts 中定义ngx-translate 的语言，如下所示：

import { SUPPORTED_LANGUAGES } from './path/to/supported-languages';

...
this.translate.addLangs(SUPPORTED_LANGUAGES.map(l => l.code);

通过使用此策略，您可以在一个文件中定义所有支持的语言，并在以后轻松添加/删除语言，而无需触及其他部分。

【讨论】：

【解决方案2】：

感谢您的回答，因为它是有用的灵感，但是我决定走一条稍微不同的路线。我会在这里为将来的任何人概述...

创建一个枚举...

export enum SupportedLanguages {
    'en' = 'English',
    'es' = 'Español',
    'fr' = 'Français'
}

export type SupportedLanguage = keyof typeof SupportedLanguages;

语言选择器模板...

<select class="form-control" [ngModel]="languageKey 
(ngModelChange)="onLanguageChange($event)">
    <option *ngFor="let language of supportedLanguages | keyvalue" 
        [ngValue]="language.key"
        [selected]="language.key === translate.currentLang">
                {{ language.value }} - {{ language.key }}
    </option>
</select>

语言选择器 ts...

import { SupportedLanguages } from 'models';

public supportedLanguages = Object(SupportedLanguages);

languageKey: string = this.translate.currentLang;

【讨论】：