如何翻译 angular 处的枚举 6

Question

我正在尝试翻译 Angular 中的枚举，但问题是我不知道如何翻译它们。我可以阅读它们，我可以在下拉列表中显示但不能翻译。

下面是我的代码

export enum test {
 test1 = '1 - do something',
 test2 = '2 - do anything',
}

我读的数据是这样的

public getEnum: any = {};

public ngOnInit(): void {
Object.values(test).map(a: string) => {

const id = a.substr(0, 5);
this.getEnum[id] = a;
}

在 html 我有这样的东西

 [options]="getEnum"

翻译是这样的。

"dropdown": {
  "doSomething": {
    "test1": "1 - do something"
   }
}

Answer 1

我建议采用一些不同的方法。不要翻译它：将枚举键保存到 translation.json 文件中，例如

export enum Test {
 test1 = 'dropdown.doSomething.test1',
 test2 = 'dropdown.doSomething.test2',
}

我认为枚举不依赖于当前语言，您可以通过以下方式轻松翻译枚举中的值：

const enTranslations = {
  dropdown: {
    doSomething: {
     test1: "1 - do something"
    }
  }
};

const getTranslatedText = (tranlations, keys: string[]) => keys.reduce((acc, curr) => acc[curr], translations);

const key1 = Test.test1
const translatedEnText = getTranslatedText(enTranslations, key1.split('.'));

然后就可以显示translatedEnText，或者传入函数调用。 translatedEnText === '1 - do something'

如果您想要使用不同语言的相同键的文本，只需使用其他翻译对象调用 getTranslatedText，例如deTranslations

如果您想将枚举映射到具有相同键和翻译值的对象，请执行以下操作：

const testEng = Object.values(Test).reduce((acc, key) => ({ ...acc, [key]: getTranslatedText(enTranslations, key.split('.'))}), {})

reducde 将从 acc 中的 {} 开始，在每个迭代步骤中，它将添加到 key 键下 getTranslatedText(enTranslations, key.split('.'))（作为值）的 acc 翻译文本。

Playground

如何翻译 angular 处的枚举 6

How to translate enums at angular 6

typescript

ngx-translate

angular