Angular 项目实现国际化的方法
目录
- 背景
- Angular i18n
- 部署翻译文件
- ts文件文案和NG-ZORRO框架文案翻译
- 总结
正如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，如
<span class="delete" i18n-title="@@agDelete" title="删除"></span>
生成的xlf(xml)格式同上
3、翻译文本，而不必创建元素
我们有时候会出现一句话多个断句情况，如果每次都添加span、label这些元素包裹的话，可能严重影响页面布局，这时候我们可以使用ng-container来包裹需要翻译的文案。
<p> <ng-container i18n=@@agLetGo>让我们现在开始吧!</ng-container>朋友! </p>
在页面显示为
<p> <!----> LET'S GO朋友! </p>
* 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) {
// 读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看
result['xliff']['file'][0]['body'][0]['trans-unit'].forEach((item) => {
var itemFormat = {
"key" : item['$']['id'],
"value": item['source'][0]
};
// 执行相关操作，key-value形式是为了统一翻译文件结构，可按需定义
})
});
});
json转xlf方法
function backToXLF(translatedParams) {
// 文件格式可自行参考angular.cn官网的例子
var xlfFormat = {
"xliff": {
"$" : {
"version": "1.2",
"xmlns" : "urn:oasis:names:tc:xliff:document:1.2"
},
"file": [
{
"$" : {
"source-language": "en",
"datatype" : "plaintext",
"original" : "ng2.template"
},
"body": [
{
"trans-unit": []
}
]
}
]
}
};
if (translatedParams instanceof Array) {
// 获取原始名称
translatedParams.forEach((data) => {
var tmp = {
"$" : {
"id" : data.key,
"datatype": "html"
},
"source": [i18nItemsOrigin[data.key]], // 这里的i18nItemsOrigin是json格式，属性名为key值，表示原始文案
"target": [data.value]
};
// 数组,json项
xlfFormat['xliff']['file'][0]['body'][0]['trans-unit'].push(tmp);
});
}
var builder = new xml2js.Builder();
var xml = builder.buildObject(xlfFormat);
return xml;
}
这样提取文案信息和转换翻译后的文件就完成了，接下来我们需要把翻译好的文案应用到项目中去。
部署翻译文件
src目录下新建locale文件夹，将翻译转换后的demo.en-US.xlf文件存在改目录下
app文件夹下新建i18n-providers.ts
import {
LOCALE_ID,
MissingTranslationStrategy,
StaticProvider,
TRANSLATIONS,
TRANSLATIONS_FORMAT
} from '@angular/core';
import { CompilerConfig } from '@angular/compiler';
import { Observable } from 'rxjs/Observable';
import { LOCALE_LANGUAGE } from './app.config'; // 自行定义配置位置
export function getTranslationProviders(): Promise<StaticProvider[]> {
// get the locale string from the document
const locale = LOCALE_LANGUAGE.toString();
// return no providers
const noProviders: StaticProvider[] = [];
// no locale or zh-CN: no translation providers
if (!locale || locale === 'zh-CN') {
return Promise.resolve(noProviders);
}
// Ex: 'locale/demo.zh-MO.xlf`
const translationFile = `./locale/demo.${locale}.xlf`;
return getTranslationsWithSystemJs(translationFile)
.then((translations: string) => [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale },
{
provide: CompilerConfig,
useValue: new CompilerConfig({ missingTranslation: MissingTranslationStrategy.Error })
}
]).catch(() => noProviders); // ignore if file not found
}
declare var System: any;
// 获取locale文件
function getTranslationsWithSystemJs(file: string) {
let text = '';
const fileRequest = new XMLHttpRequest();
fileRequest.open('GET', file, false);
fileRequest.onerror = function (err) {
console.log(err);
};
fileRequest.onreadystatechange = function () {
if (fileRequest.readyState === 4) {
if (fileRequest.status === 200 || fileRequest.status === 0) {
text = fileRequest.responseText;
}
}
};
fileRequest.send();
const observable = Observable.of(text);
const prom = observable.toPromise();
return prom;
}
main.ts文件修改为
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { getTranslationProviders } from './app/i18n-providers';
if (environment.production) {
enableProdMode();
}
getTranslationProviders().then(providers => {
const options = { providers };
platformBrowserDynamic().bootstrapModule(AppModule, options)
.catch(err => console.log(err));
});
别忘了将locale目录添加到.angular-cli.json里，来单独打包。
这样我们对静态文案的翻译工作基本已经完成了，但是有些动态文案如ts文件里的文案或者第三方框架属性该如何翻译呢？下面会介绍针对 ts 文件和 NG-ZORRO框架实现动态文案翻译的方案。
ts文件文案和NG-ZORRO框架文案翻译
具体思路
通过Pipe调用Service方法，根据对应的唯一id值匹配json对象里的翻译结果，进而返回渲染到前端，参考于NG-ZORRO框架的国际化实现方案。
首先我们定义一下json翻译对象的格式,全部为三层结构,动态变量需要按%%包裹，这样做的原因是和项目结构相关联，也便于后期和i18n方式格式统一。
{
"app": {
"base": {
"hello": "文件文案",
"userCount": "一共%num%人"
}
}
}
格式已定，我们继续定义Service处理方式
这里复用NG-ZORRO的国际化方案 ,可以简化我们的开发,有兴趣的可以参看一下其源码。
*** TranslateService ***
import { Injectable } from '@angular/core';
// 引入语言配置和国际化文件文案对象
import { LOCALE_LANGUAGE } from '../app.config';
import { enUS } from '../locales/demo.en-US';
import { zhCN } from '../locales/stream.zh-CN';
@Injectable()
export class TranslateService {
private _locale = LOCALE_LANGUAGE.toString() === 'zh-CN' ? zhCN : enUS;
constructor() {
}
// path为app.base.hello格式的字符串,这里按json层级取匹配改变量
translate(path: string, data?: any): string {
let content = this._getObjectPath(this._locale, path) as string;
if (typeof content === 'string') {
if (data) {
Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, 'g'), data[key]));
}
return content;
}
return path;
}
private _getObjectPath(obj: object, path: string): string | object {
let res = obj;
const paths = path.split('.');
const depth = paths.length;
let index = 0;
while (res && index < depth) {
res = res[paths[index++]];
}
return index === depth ? res : null;
}
}
这样，只需要在Pipe中调用Service的translate方法即可
*** NzTranslateLocalePipe ***
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '../services/translate.service';
@Pipe({
name: 'nzTranslateLocale'
})
export class NzTranslateLocalePipe implements PipeTransform {
constructor(private _locale: TranslateService) {
}
transform(path: string, keyValue?: object): string {
return this._locale.translate(path, keyValue);
}
}
好了，现在我们处理逻辑已经完全结束了，下面介绍一下如何使用
*** NG-ZORRO 控件 ***
<nz-input [nzPlaceHolder]="'app.base.hello'|nzTranslateLocale"></nz-input> // 无动态参数
<nz-popconfirm [nzTitle]="'app.base.userCount'|nzTranslateLocale: {num:users.length}" ...>
... // 有动态参数
</nz-popconfirm>
*** ts文件 ***
export class AppComponent implements OnInit {
demoTitle='';
users = ['Jack', 'Johnson', 'Lucy'];
constructor(privete translateService: TranslateService) {
}
ngOnInit() {
this.demoTitle = this.translateService.translate('app.base.hello');
}
}
以上流程基本上能满足大部分angular项目的国际化需求，如果需要更加复杂的国际化情况，欢迎讨论。
总结
Angular到5.0的国际化已经相对来说简便了很多，我们只需要在合适的地方打上i18n的tag即可方便快速地提取需要翻译文案，具体如何处理翻译后的文件因人而异，多种方法可帮助我们转换(如本文通过nodejs)。
复杂一点的是无法通过打i18n标签来翻译的文本，NG-ZORRO的国际化方案弥补了这方面的不足，结合起来可以很方便地完成项目的国际化。 国际化如果没有专门的团队支持，翻译难度很大，需要考虑的东西很多，比如繁体还有澳门繁体、台湾繁体等，语法也不尽相同。
参考目录
Angular的国际化（i18n）在线例子
NG-ZORRO Locale 国际化
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS国际化详解及示例代码
AngularJS支持内置的国际化三种类型的过滤器货币,日期和数字.只需要根据国家的区域纳入相应的JS.默认情况下它处理浏览器的语言环境.例如,要使用丹麦语的语言环境,使用下面的脚本 <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 使用丹麦语的语言环境实例 testAngularJS.html <html> <head&g
-
AngularJs 国际化（I18n/L10n）详解
一.I18n and L10n in AngularJS 1. 什么是I18n和L10n? 国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言.文化的本地化的方法的规范.本地化(Localization),简称L10n,一个使得应用.文本有适应特殊的文化或者语言市场的能力的规范.对于应用开发者,使一个程序国际化,意味着需要从程序中抽取所有字符串和其他区域较为特别的地方(例如日期和货币格式).使一个程序本地化,意味着需要提供根据I18n
-
Angular2+国际化方案（ngx-translate）的示例代码
本文只针对ngx-translate/core 6.x版本,如果你使用的是5.x或者更低的版本,请参照以下链接. https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md 安装 首先需要安装npm依赖: npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --sav
-
Angular2中如何使用ngx-translate进行国际化
相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate. 项目地址:https://github.com/ngx-translate/core 使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core npm install --save @ngx-translate/http-lo
-
浅析如何利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕
-
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr
-
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工具将标记的信息提取到一个行业标准的翻
-
Angular 项目实现国际化的方法
目录 背景 Angular i18n 部署翻译文件 ts文件文案和NG-ZORRO框架文案翻译 总结 正如angular官网所说,项目国际化是一件具有挑战性,需要多方面的努力.持久的奉献和决心的任务.本文将介绍angular项目的国际化方案,涉及静态文件(html)和ts文件文案的国际化. 背景 Angular: 5.0 Angular Cli: 1.6.1(1.5.x也可以) NG-ZORRO: 0.6.8 Angular i18n i18n模板翻译流程有四个阶段: 在组件模板中标记需要翻译的
-
Angular项目中$scope.$apply()方法的使用详解
前言 相信大家在一开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢.下面话不多说,来一起看看详细的介绍吧. JavaScript执行顺序 JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结. 每当有耗费时间较多的任务出现,例如等待一个click事件,等
-
使用Docker部署Angular项目的方法步骤
Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器.由于在 node 环境,所以使用 express 最为便捷了. 创建 server.js const express = require('express'); const app = express(); const config = { root: __dirname + '/dist', port: process.env.PORT || 4
-
在Angular项目使用socket.io实现通信的方法
step1.为项目安装依赖 在终端输入以下命令为我们的angular项目安装express.socket.io.socket.io-client npm install express socket.io socket.io-client 本人安装的各版本信息如下: "express": "^4.17.1", "socket.io": "^3.0.4", "socket.io-client": "
-
cnpm加速Angular项目创建的方法
问题描述 使用官网推荐的命令行工具ng来初始化Angular项目. ng new my-app 前面都挺快的,创建本地文件嘛.就是到最后安装依赖的时候特别慢,等了半个小时,也没装完. cnpm加速 使用淘宝为广大程序员提供的cnpm进行加速,cnpm官网. npm install -g cnpm --registry=https://registry.npm.taobao.org 加速创建 慢的问题就出现在ng使用npm安装依赖,所以就需要使用ng创建项目骨架,但是跳过安装依赖的过程,我们手动去
-
Angular下H5上传图片的方法（可多张上传）
最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西. 1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码 angular.module('myApp') .directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $tim
-
详解如何构建Angular项目目录结构
在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用. 首先看一下整体的目录结构: 可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的 首层目录: node_modules 第三方依赖包存放目录 e2e 端到端的测试目录 用来做自动测试的 src 应用源代码目录 .angular-cli.json Angular命令行工具的配置
-
基于Session的国际化实现方法
如何将我们网站的其它内容(如菜单.标题等)做国际化处理呢?这就是本篇要将的内容->国际化. 在项目的spring.xml文件添加的内容如下 <mvc:interceptors> <span style="white-space:pre"> </span><!-- 国际化操作拦截器 如果采用基于(请求/Session/Cookie)则必需配置 --> <bean class="org.springframework.w