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

Question

我被分配了使用 ngx-translate 在 Angular 中翻译侧边栏的职责。要翻译的元素是一个接口，表示授予的用户类型

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

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

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"