首页 / ANGULAR / Angular 项目实现国际化的方法

Angular 项目实现国际化的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular 项目实现国际化的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9522字，纯文字阅读大概需要14分钟。

内容图文

正如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 国际化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的Angular 项目实现国际化的方法全部内容，希望文章能够帮你解决Angular 项目实现国际化的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338926.html

来源：【匿名】

【上一篇】详解Angular5 服务端渲染实战【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【Angular 项目实现国际化的方法】教程文章相关的互联网学习教程文章

angular 更新表单值的两种方法： setvalue,patchvalue【代码】

使用 patchValue() 方法会比使用 setValue() 方法更好！ 1、patchValue()// angular2/packages/forms/src/model.tsexport class FormGroup extends AbstractControl {...patchValue(value: {[key: string]: any},{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {Object.keys(value).forEach(name => {if (this.controls[name]) {this.controls[name].patchValue(value[name], {onlySelf: true, em...

angular HttpClient post put patch del 方法（2）-Promise 服务【代码】【图】

前做了在一个页面的CRUD的方法，现实中webapi模块往往是单独写服务的，所以修改了一下原来的设计和结构，还是需要很多知识的。2017.11.15增加patch方法，改进服务程序优化写法2017.11.27增加Promise返回值处理,服务器返回错误信息后的处理.因为所有的CRUD方法都写在服务中，所以后台的代码就简单多了，回调还需要详细信息什么的，总之已经能运行正常了： 1 import { Component, OnInit } from ‘@angular/core‘;2 import { Pati...

angular的bootstrap方法【代码】

使用 angular 写程序的开发都知道，要想使用 angular 应用能够运行，需要在页面中 “登录” 它，我们常用的方法是这样的：<!DOCTYPE html><html ng-app=‘myApp‘><head><meta charset=‘utf-8‘><script src=‘angular.js‘></script></head><body><div id=‘text‘ ng-controller=‘myCtrl‘></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){console.log(1);})</script></body></...

angular内置方法---序列化、反序列化【代码】

toJson:将对象或者数组序列化为json格式的字符串fromJson：相反的过程 1 <!DOCTYPE html>2 <html ng-app="myApp">3 <head lang="en">4 <meta charset="UTF-8">5 <title></title>6 <script src="js/angular.js"></script>7 </head>8 <body>910 <div ng-controller="myCtrl"> 1112 </div> 1314 <script> 15var app = angular.module(‘myApp‘, [‘ng‘]); 1617 app.controller(‘myCtrl‘, function ($scope) { 1819//反序...

Angularjs js方法参数动态传入【代码】

$scope.pageNumberCount = 10;<li ng-repeat="i in pageNumberCount"> <a ng-click="clickPagination(i)">{{i}}</a>  </li>原文：http://my.oschina.net/moks/blog/530325

angular.element方法汇总

转载 addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中...

angular HttpClient getbyid 方法获取数据【代码】【图】

续上一篇之后，简单传参的方法，最常用的是getbyid 方法。直接上代码：getbyId(id: string) {this.myhttp.get(‘http://192.168.2.139:9002/api/patients/‘ + id).subscribe(data => {this.myPatient = new Patient({id: data[‘PatientId‘],FirstName: data[‘Details‘].FirstName,LastName: data[‘Details‘].LastName,MiddleName: data[‘Details‘].MiddleName,BirthDate: data[‘Details‘].BirthDate,Gender: data[‘Det...

细说angular Form addControl方法【代码】【图】

在本篇博文中，我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况，当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。下面且让我们先来从angular源码中看起如下：首先是ngModel:?123456789101112131415161718varngModelDirective = function() { return{ require: [‘ngModel‘, ‘^?form‘], ...

angular.element方法汇总

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元...

angularjs中ajax请求时传递参数的方法【代码】

method1方法使用的是params参数，该用法会把参数直接附加到url中method2方法使用的是data参数，该参数会把页面参数类型从默认的multipart/form-data改为application/x-www-form-urlencoded类型，并且将传递的data解析为字符串，该方法会以post参数的方式传递下面是代码部分：<html ng-app="myApp"><head><title>angularjs-ajax</title><script type="text/javascript" src="../../lib/ionic/js/angular/angular.min.js" charset="u...

AngularJS 控制器的方法

AngularJS 控制器也有方法(变量和函数)<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="http://a...

angular在服务中调用组件的某个方法，并传参给组件，（反向调用），变量改变后，强制更新视图【代码】

需要被调用方法的组件文件import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from ‘@angular/core‘;import { SettingsService } from ‘@delon/theme‘;import { SetdataService } from ‘./setdata.service‘import { NgZone } from ‘@angular/core‘;@Component({ selector: ‘layout-header‘, templateUrl: ‘./header.component.html‘, changeDetection: ChangeDetectionStrategy.OnPush,})export cl...

AngularJS方法 —— angular.copy【图】

描述：　　复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。如果省略了destination，一个新的对象或数组将会被创建出来；如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中；如果source不是对象或数组（例如是null或undefined）, 则返回source；如果source和destination类型不一致，则会抛出异常。注意：这个是单纯复制覆盖，不是类似继承使用方法：　　angular.copy(source, ...

angular自定义指令在指令里面调用父作用域里面的方法传参【图】

使用自定义指令的时候在指令里面调用父作用域里面的方法，在指令里面在父作用域里面的模板里面使用指令在控制器里面原文：http://www.cnblogs.com/fanzhengshao/p/6006220.html

angular指令监听ng-repeat渲染完成后执行自定义事件方法【代码】

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己创建自定义指令。在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even，$index会随着每次遍历（从0开始）递增，当遍历到最后一个时，$last的值为true，所以可以通过判断$last的值来监听ng-repeat的执行状态，怎么在遍历过程中拿到$last的值：自定义指令var app = angul...

首页 / ANGULAR / Angular 项目实现国际化的方法

Angular 项目实现国际化的方法

内容导读

内容图文

背景

Angular i18n

部署翻译文件

ts文件文案和NG-ZORRO框架文案翻译

总结

内容总结

内容备注

内容手机端

【Angular 项目实现国际化的方法】教程文章相关的互联网学习教程文章

项目 - 相关标签

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程