angular做语言切换_使用Angular如何实现国际化（详细教程）

本篇文章主要介绍了Angular 项目实现国际化的方法，现在分享给大家，也给大家做个参考。

正如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文件来介绍几种使用方法。

Angular i18n

Angular 国际化项目

国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。

让我们现在开始吧!朋友!

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

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

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

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

国际化是一项很具有挑战性，需要多方面的努力、持久的奉献和决心的任务。

xxx.ts

linenum

2、为title添加i18n属性

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

生成的xlf(xml)格式同上

3、翻译文本，而不必创建元素

我们有时候会出现一句话多个断句情况，如果每次都添加span、label这些元素包裹的话，可能严重影响页面布局，这时候我们可以使用ng-container来包裹需要翻译的文案。

让我们现在开始吧!朋友!

在页面显示为

LET'S GO朋友!

* ng-container变为了注释块,这样做不会影响页面布局(尤其是应用了style样式的情况)

打上标签后，我们只要执行ng xi18n即可自动创建出xlf文件，通常为message.xlf，如需自定义，可自行前往 Angular CLI 官网查看。

XLF与JSON转换

xlf转json方法

我个人是采用xml2js库进行操作，简单代码如下：const fs = require('fs');

xml2js = require('xml2js');

var parser = new xml2js.Parser();

fs.readFile(fileName, 'utf8', (err, data) => {

parser.parseString(data, function (err, result) {

// 读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看

resu