ngx-translate：与接口、*ngFor 和开关一起使用

Question

我被指派负责使用 ngx-translate 翻译 Angular 中的边栏。要翻译的元素是一个接口，它将代表授予的用户类型

export interface userType {
 role: [string, string];
 operations: [string, string, string][];
}

为了知道用户的类型，我们在componets.ts中放置了一个开关条件

switch(typeOfUser) {
case 'ROLE_CLIENT':
(() => {
this.userType = {
role: ['EnglishStr', 'EnglishStr'],
operations: ['EnglishStr', 'EnglishStr', 'EnglishStr']
}})}

我已经翻译了 es.json 文件中的字符串，但是逐字逐句翻译。

"EnglishStr": "SpanishStr"

现在，在 component.html 中我们确实有一个 *ngFor 来遍历 userType.operations

    <li *ngFor="let string of userType.operations">
      <a routerLink="{{ string[2] }}">
        <i class="{{ string[0] }} me-3"></i>
        <span> {{ string[1] | translate}} </span>
      </a>
    </li>

虽然翻译管道完成了我要求的工作：有没有更好的方法来解决这个问题？
我在 es.json

中尝试过这种方式

userType : {
role: ['SpanishStr', 'SpanishStr'],
operations: ['SpanishStr', 'SpanishStr', 'SpanishStr'] }

它没有从英语翻译成西班牙语。为什么我的第一种方法不正确？是否有与我使用的方法不同的方法？非常感谢

Answer 1

嗯，我浏览了 ngx-translate 文档。根据您在此处描述的方法，我找不到任何提示。我必须补充一点，我在不同的项目中使用了 ngx-translate 多年。

翻译人员的目标始终是拥有一个标识符字符串，然后您可以通过该标识符字符串进入当前激活语言的 JSON-文件并搜索匹配的翻译。

在你的例子中你有

en.json

{
   "name": "name",
   "age":  "age"
}

es.json

{
   "name": "nombre",
   "age": "edad"
}

然后 UI 将显示此标识符的英语或西班牙语字符串表示形式。

无路可退

为了使其更明显，您可以使用更具体的标识符，例如

en.json

{
   "global.name": "name",
   "global.age":  "age",
   "xyz.component.direction": "direction",
   "abc.component.working-hours": "working hours"
}

es.json

   "global.name": "nombre",
   "global.age":  "edad",
   "xyz.component.direction": "dirección",
   "abc.component.working-hours": "horas laborales"

ngx-translate：与接口、*ngFor 和开关一起使用

ngx-translate: use with interfaces, *ngFor and switch

ngx-translate

angular