ngx-translate

Question

这似乎是一件相对简单的事情，但我似乎找不到任何人这样做的例子（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']);

Answer 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);

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

Answer 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;

ngx-translate - 更改语言 select 下拉列表中的显示值

ngx-translate - Change displayed value in language select dropdown

html

typescript

angular