在带角5的* ngFor循环中使用有角i18n [英] Using angular i18n inside *ngFor loop with angular 5

问题描述

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

I would like to use dynamic translations inside a ngFor-Loop in template like this:

<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(国际化)工具是否可以动态转换此枚举值?

Is there a way with the current on-board tools of angular 5 i18e (internationalization) to dynamically translate this enum value?

如我所读，在Angular 6.1或更高版本中，将有一种方法可以转换.ts中的值.但是，如果我现在想使用这个呢?有任何解决方法吗?

As I read, in Angular 6.1 or later there will be a way to translate values in .ts. But what, if i would like to use this for now? Any workarounds?

使用替代文本消息不是一个好方法，因为如果枚举中包含数百个值，该怎么办.我不会在html代码中重复我的枚举.

To use alternative text messages could't be a good way, because what if you habe hundred of values in the enum. I would'n repeat my enum in the html code.

推荐答案

我设法使其正常运行.这是我的示例，该格式使用带有选择ICU表达式的xlif2格式

I managed to make it work. Here is my example using format xlif2 with a select ICU expression

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表达式.所有其他可能的值将仅存在于翻译文件中

• I needed to add some text before the ICU expression (dummy) otherwise it did not work.
• Assign an id to the translation (here it's role)
• You do not need to have all possible values defined here . For instance, I just defined one (admin) to have a valid ICU expression. All other possible values will just be in the translation files

然后提取消息文件(例如法语)

Then extract the message file (e.g. for french)

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

然后在消息messages.[language].xlf文件中设置翻译

Then set the translations in the message messages.[language].xlf file

    <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是该工具生成的ID.您只需要修改该单元即可添加任意数量的角色/翻译

The ID of the unit 7222321253551421654 containing the actual values to translate is the one generated by the tool. You just need to modify that unit to add as many roles/translations as you want

这篇关于在带角5的* ngFor循环中使用有角i18n的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！