Angular 5中如何在*ngFor循环内实现i18n动态翻译？

当然可以！Angular 5自带的国际化（i18n）工具完全能搞定你在*ngFor循环里的动态枚举值翻译需求，下面给你一步步讲怎么实现：

1. 为每个枚举值定义翻译条目 #

首先，你需要在翻译文件（通常是messages.xlf）里为role枚举的每一个可能值添加对应的翻译项。比如假设你的角色有ADMIN、USER、MODERATOR三种，翻译文件里要这么写：

<trans-unit id="role.select" datatype="html">
  <source>{VAR_SELECT, select, ADMIN {Administrator} USER {Regular User} MODERATOR {Community Moderator}}</source>
  <target state="final">{VAR_SELECT, select, ADMIN {管理员} USER {普通用户} MODERATOR {社区版主}}</target>
</trans-unit>

2. 调整模板使用i18n的select语法 #

Angular的i18n支持select格式来处理动态值映射，刚好适合枚举场景。修改你的模板，用这种语法来绑定角色值——这样i18n提取工具能捕获所有可能的角色选项，方便后续翻译：

<mat-card *ngFor="let user of usersList">
  <mat-card-title>
    <span>{{user.name}}</span>
  </mat-card-title>
  <mat-card-content>
    <!-- 动态翻译角色枚举值 -->
    <span i18n="用户角色@@role.select">
      {user.role, select,
        ADMIN {Administrator}
        USER {Regular User}
        MODERATOR {Community Moderator}
      }
    </span>
  </mat-card-content>
</mat-card>

3. 提取并完成翻译 #

运行Angular的i18n提取命令来生成或更新你的翻译文件：

ng xi18n --output-path src/locale

这会生成messages.xlf文件，里面包含刚才定义的角色选择翻译单元。你只需要在<target>部分填写对应语言的翻译内容即可。

注意事项 #

• 一定要把所有可能的枚举值都写到select块里，如果某个角色值没被列出，页面会直接显示原始的枚举值。
• Angular 5的i18n是编译时国际化，翻译会被打包到对应的构建版本中。如果需要运行时切换语言，可能需要借助@ngx-translate/core这类库，但如果是单语言构建（每种语言单独打包），原生工具完全够用。

内容的提问来源于stack exchange，提问作者Gatschet