创新互联Angular教程：Angular处理翻译文件

使用翻译文件

准备好要翻译的组件后，使用 Angular CLI 的 extract-i18n 命令将组件中的标记文本提取到源语言文件中。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的扶风网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

已标记的文本包括标记为 i18n 的文本、标记为 i18n-属性的属性和标记为 $localize 的文本。

完成以下步骤为你的项目创建和更新翻译文件。

提取源语言文件
（可选）更改位置、格式和名称
复制源语言文件以便为每种语言创建一个翻译文件
翻译每个翻译文件
分别翻译复数和替代表达式

翻译复数
翻译替代表达式
翻译嵌套表达式

提取源语言文件

要提取源语言文件，请完成以下操作。

打开终端窗口。
切换到你的项目根目录。
运行以下 CLI 命令。

ng extract-i18n

extract-i18n 命令在项目的根目录中创建一个名为 messages.xlf 的源语言文件。有关 XML 本地化交换文件格式（XLIFF，版本 1.2）的更多信息，请参阅 XLIFF。

使用以下 extract-i18n 命令选项更改源语言文件位置、格式和文件名。

命令选项	详情
`--format`	设置输出文件的格式
`--outFile`	设置输出文件的名称
`--output-path`	设置输出目录的路径

更改源语言文件的位置

要在 src/locale 目录中创建文件，请将输出路径指定为选项。

extract-18n --output-path 示例

以下示例将输出路径指定给选项。

ng extract-i18n --output-path src/locale

更改源语言文件格式

extract-i18n 命令会创建如下翻译格式的文件。

翻译格式	详情	文件扩展名
ARB	应用资源包	`.arb`
JSON	JavaScript 对象表示法	`.json`
XLIFF 1.2	XML 本地化交换文件格式，版本 1.2	`.xlf`
XLIFF 2	XML 本地化交换文件格式，版本 2	`.xlf`
XMB	XML 消息包	`.xmb` (`.xtb`)

使用 --format 命令选项明确指定转换格式。

XMB 格式生成 .xmb 扩展名的源语言文件，但生成 .xtb 扩展名的翻译文件。

extract-18n --format 示例

以下示例演示了几种翻译格式。

ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb

更改源语言文件名

要更改提取工具生成的源语言文件的名称，请使用 --outFile 命令选项。

extract-18n --out-file 示例

以下示例演示命名输出文件。

ng extract-i18n --out-file source.xlf

为每种语言创建一个翻译文件

要为语言环境或语言创建翻译文件，请完成以下操作。

提取源语言文件。
复制源语言文件，为每种语言创建一个翻译文件。
重命名翻译文件以添加语言环境标识。

messages.xlf --> message.{locale}.xlf

在你的项目根目录创建一个名为 locale 的新目录。

src/locale

将翻译文件移到新目录。
将翻译文件发送给你的翻译人员。
对要添加到应用程序中的每种语言重复上述步骤。

法语的 extract-i18n 示例

比如，要创建法语翻译文件，请完成以下操作。

运行 extract-18n 命令。
复制 messages.xlf 源语言文件。
将副本重命名为 messages.fr.xlf 以进行法语 ( fr ) 翻译。
将 fr 翻译文件移动到 src/locale 目录。
将 fr 翻译文件发送给翻译人员。

翻译每个翻译文件

除非你精通该语言并有时间编辑翻译，否则你可能会完成以下步骤。

将每个翻译文件发送给翻译人员。
翻译人员使用 XLIFF 文件编辑器完成以下操作。

创建翻译。
编辑翻译。

法语翻译流程示例

要演示该过程，请查看 Angular 国际化应用范例中的 messages.fr.xlf 文件。Angular 国际化应用范例中就包含法语翻译文件，你无需特殊的 XLIFF 编辑器或法语知识即可进行编辑。

以下操作描述了法语的翻译过程。

打开 messages.fr.xlf 并找到第一个元素。这是一个翻译单元，也称为文本节点，表示之前用 i18n 属性标记的
问候标签的翻译。


  Hello i18n!
  An introduction header for this sample
  User welcome

id="introductionHeader" 是自定义 ID，但没有源 HTML 中所需的 @@ 前缀。

复制文本节点中的 ... 元素，将其重命名为 target，然后将内容替换为法语文本。


  Hello i18n!
  Bonjour i18n !
  An introduction header for this sample
  User welcome

在更复杂的翻译中，描述和含义元素中的信息和上下文可帮助你选择正确的词进行翻译。

翻译其他文本节点。以下示例显示了翻译方式。


  I don't output any element
  Je n'affiche aucun élément


  Angular logo
  Logo d'Angular

不要更改这些翻译单元的 ID。每个 id 属性由 Angular 生成，它取决于组件文本的内容和所指定的含义。如果你更改了文本或含义，则 id 属性就会更改。

翻译复数

根据需要为每种语言添加或删除复数分支。

语言复数规则，参见 CLDR 复数规则。

minute plural 例子

要翻译 plural，就要翻译 ICU 格式的匹配值。

just now
one minute ago
minutes ago

以下示例显示了翻译方式。


  {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} }
  {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a  minutes} }

翻译替代表达式

Angular 还会提取备用的 select ICU 表达式作为单独的翻译单元。

gender select 示例

以下示例在组件模板中显示了一个 select ICU 表达式。

The author is {gender, select, male {male} female {female} other {other}}

在这个例子中，Angular 将表达式提取到两个翻译单元中。第一个包含 select 子句之外的文本，并为 select 使用占位符（）：


  The author is 
  L'auteur est

翻译文本时，如有必要，请移动占位符，但不要将其删除。如果删除占位符，将从翻译完的应用程序中删除此 ICU 表达式。

以下示例显示包含 select 子句的第二个翻译单元。


  {VAR_SELECT, select, male {male} female {female} other {other} }
  {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }

以下示例显示了翻译完的两个翻译单元。


  The author is 
  L'auteur est 


  {VAR_SELECT, select, male {male} female {female} other {other} }
  {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }

翻译嵌套表达式

Angular 按照与替代表达式相同的方式处理嵌套表达式。Angular 会将表达式提取到两个翻译单元中。

嵌套 plural 示例

以下示例显示包含嵌套表达式之外的文本的第一个翻译单元。


  Updated: 
  Mis à jour:

以下示例展示了包含完整嵌套表达式的第二个翻译单元。


  {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }
  {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a  minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }

以下示例会在翻译后显示两个翻译单元。


  Updated: 
  Mis à jour: 


  {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }
  {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a  minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }

网站标题：创新互联Angular教程：Angular处理翻译文件
链接地址：http://www.mswzjz.cn/qtweb/news36/555486.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章