Angular 项目实现国际化的方法

2024-05-06 15:22:47

字体：大中小

来源：转载

供稿：网友

正如angular官网所说，项目国际化是一件具有挑战性，需要多方面的努力、持久的奉献和决心的任务。
本文将介绍angular项目的国际化方案，涉及静态文件(html)和ts文件文案的国际化。

背景

Angular: 5.0 Angular Cli: 1.6.1(1.5.x也可以) NG-ZORRO: 0.6.8

Angular i18n

i18n模板翻译流程有四个阶段：

在组件模板中标记需要翻译的静态文本信息(即打上i18n标签)。 Angular的i18n工具将标记的信息提取到一个行业标准的翻译源文件(如.xlf文件,使用ng xi18n)。翻译人员编辑该文件，翻译提取出来的文本信息到目标语言，并将该文件还给你(需要翻译人员接入，本文采用将xlf文件转为json格式文件输出，最终将json文件转换回xlf格式文件)。 Angular编译器导入完成翻译的文件，使用翻译的文本替换原始信息，并生成新的目标语言版本的应用程序。

你可以为每种支持的语言构建和部署单独的项目版本，仅需替换翻译后的xlf文件即可。

如何在模板文件中使用？

i18n提供了几种使用方式，还专门为单复数提供了翻译方式（个人没有使用，感觉不太方便）。接下来以一个单独的html文件来介绍几种使用方法。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Angular i18n</title></head><body>  <h1 i18n="Site Header|An introduction header for i18n Project@@stTitle">Angular 国际化项目</h1>  <p>   <span i18n="@@agDescription">国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。</span>   <span class="delete" i18n-title="@@agDelete" title="删除"></span>  </p>  <p><ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友!</p></body></html>

上述代码展示了几种i18n的使用方式：

1、使用i18n属性标记（可添加上说明性文案，格式如：title|description@@id，title和description可帮助翻译人员更好地理解文案含义，是否添加取决于自身项目情况）

可以在静态标签上直接打上i18n的tag，如

<span i18n="@@agDescription"></span>

生成的xlf(xml)字段格式为

<trans-unit id="agDescription" datatype="html"> <source>国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。</source> <context-group purpose="location">  <context context-type="sourcefile">xxx.ts</context>  <context context-type="linenumber">linenum</context> </context-group></trans-unit>

2、为title添加i18n属性

对于html标签属性，同样可以添加i18n，如

上一篇：(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看

下一篇：react-router v4如何使用history控制路由跳转详解