Question

我想在模板中的ngFor-Loop中使用动态翻译，如下所示：

<mat-card *ngFor="let user of usersList">
    <mat-card-title>
        <span>{{user.name}}</span>
    </mat-card-title>
    <mat-card-content>
        <!--This is the enum i would like to translate dynamic -->
        <span i18n="Role@@role">{{user.role}}</span>
    </mat-card-content>
</mat-card>

目前使用角度5 i18e（国际化）的板载工具是否可以动态转换此枚举值？

正如我所读到的，在Angular 6.1或更高版本中，将有一种方法来转换.ts中的值。但是，如果我现在想使用它呢？任何解决方法？

使用替代短信可能不是一个好方法，因为如果你在枚举中有数百个值，那该怎么办？我会在HTML代码中重复我的枚举。

Answer 1

我设法让它发挥作用。这是我使用格式xlif2和选择ICU表达式

的示例

https://angular.io/guide/i18n#translate-select

以下是我翻译选择

的方法

<强> component.html

    <ul>
      <li *ngFor="let user of users">
        <span i18n="@@role">dummy {user.role, select, admin {admin}}</span>
      </li>
      </ul>

注意：

我需要在ICU表达式之前添加一些文本（虚拟），否则它不起作用。
为翻译分配ID（此处为role）
您不需要在此处定义所有可能的值。例如，我只定义了一个（admin）以获得有效的ICU表达式。所有其他可能的值都将出现在翻译文件中

然后提取消息文件（例如法语）

    ng xi18n --outputPath src/locale --locale fr--i18nFormat=xlf2 --outFile messages.fr.xlf

然后在消息messages.[language].xlf文件

中设置翻译

    <unit id="role">
      <segment>
        <source>ROLE <ph id="0" equiv="ICU" disp="{user.role, select, admin {...} user {...} other {...}}"/></source>
        <target>ROLE <ph id="0" equiv="ICU" disp="{user.role, select, admin {...} user {...} other {...}}"/></target>
      </segment>
    </unit>
    <unit id="7222321253551421654">
      <segment>
        <source>{VAR_SELECT, select, admin {administrator} user {user} other {other} }</source>
        <target>{VAR_SELECT, select, admin {administrateur} user {utilisateur} other {autre} }</target>
      </segment>
    </unit>

包含要转换的实际值的单元7222321253551421654的ID是该工具生成的值。您只需要修改该单元即可添加任意数量的角色/翻译

Answer 2

我还测试了.xlf

这对我来说很有用：

<mat-card *ngFor="let user of usersList">
    <mat-card-title>
        <span>{{user.name}}</span>
    </mat-card-title>
    <mat-card-content>
       <span i18n="@@roleKey">{user.roles, select, role {role}}</span>
    </mat-card-content>
</mat-card>

我的messeges.de.xlf中的翻译部分现在是

<trans-unit id="roleKey" datatype="html">
        <source>{VAR_SELECT, select, role {role}}</source>
        <target>{VAR_SELECT, select, SUPER_ADMIN {Super Admin} LIZENZ_MANAGER {Lizenz Manager} RECHTLICHE_EXPERT {Rechtliche-Expert} INFRASTRUKTRELLE_EXPERT {Infrastruktrelle-Expert} SPORTLICHE_EXPERT {Sportliche Expert} ADMINISTRATIVES_EXPERT {Administratives-Expert} FINANZIELLE_EXPERT {Finanzielle-Expert} LIZENZ_BEWERBER {Lizenz-Bewerber} }</target>
        <context-group purpose="location">
            <context context-type="sourcefile">app/locallogin/locallogin.component.ts</context>
            <context context-type="linenumber">18</context>
        </context-group>
</trans-unit>

在角度为5的* ngFor循环中使用角度i18n

2 个答案: