使用Angular如何实现国际化（详细教程）-js教程-PHP中文网

背景

Angular i18n

部署翻译文件

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

总结

首页

web前端

js教程

使用Angular如何实现国际化（详细教程）

亚连

Jun 13, 2018 am 10:06 AM

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

<!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&#39;S GO朋友!
</p>

登录后复制

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

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

XLF与JSON转换

xlf转json方法

我个人是采用xml2js库进行操作，简单代码如下：

const fs = require(&#39;fs&#39;);
xml2js = require(&#39;xml2js&#39;);
var parser = new xml2js.Parser();
fs.readFile(fileName, &#39;utf8&#39;, (err, data) => {
 parser.parseString(data, function (err, result) {
  // 读取新文件全部需要翻译的数据，并对比已翻译的进行取舍，具体转换成的格式结构可自行查看
  result[&#39;xliff&#39;][&#39;file&#39;][0][&#39;body&#39;][0][&#39;trans-unit&#39;].forEach((item) => {
   var itemFormat = {
    "key" : item[&#39;$&#39;][&#39;id&#39;],
    "value": item[&#39;source&#39;][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[&#39;xliff&#39;][&#39;file&#39;][0][&#39;body&#39;][0][&#39;trans-unit&#39;].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 &#39;@angular/core&#39;;
import { CompilerConfig } from &#39;@angular/compiler&#39;;
import { Observable } from &#39;rxjs/Observable&#39;;
import { LOCALE_LANGUAGE } from &#39;./app.config&#39;; // 自行定义配置位置

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 === &#39;zh-CN&#39;) {
  return Promise.resolve(noProviders);
 }

 // Ex: &#39;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: &#39;xlf&#39; },
   { 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 = &#39;&#39;;
 const fileRequest = new XMLHttpRequest();
 fileRequest.open(&#39;GET&#39;, 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 &#39;@angular/core&#39;;
import { platformBrowserDynamic } from &#39;@angular/platform-browser-dynamic&#39;;

import { AppModule } from &#39;./app/app.module&#39;;
import { environment } from &#39;./environments/environment&#39;;
import { getTranslationProviders } from &#39;./app/i18n-providers&#39;;

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 &#39;@angular/core&#39;;
// 引入语言配置和国际化文件文案对象
import { LOCALE_LANGUAGE } from &#39;../app.config&#39;;
import { enUS } from &#39;../locales/demo.en-US&#39;;
import { zhCN } from &#39;../locales/stream.zh-CN&#39;;

@Injectable()
export class TranslateService {

 private _locale = LOCALE_LANGUAGE.toString() === &#39;zh-CN&#39; ? 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 === &#39;string&#39;) {
   if (data) {
    Object.keys(data).forEach((key) => content = content.replace(new RegExp(`%${key}%`, &#39;g&#39;), data[key]));
   }
   return content;
  }
  return path;
 }

 private _getObjectPath(obj: object, path: string): string | object {
  let res = obj;
  const paths = path.split(&#39;.&#39;);
  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 &#39;@angular/core&#39;;
import { TranslateService } from &#39;../services/translate.service&#39;;

@Pipe({
 name: &#39;nzTranslateLocale&#39;
})
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]="&#39;app.base.hello&#39;|nzTranslateLocale"></nz-input> // 无动态参数
<nz-popconfirm [nzTitle]="&#39;app.base.userCount&#39;|nzTranslateLocale: {num:users.length}" ...>
... // 有动态参数
</nz-popconfirm>

*** ts文件 ***
export class AppComponent implements OnInit {
 demoTitle=&#39;&#39;;
 users = [&#39;Jack&#39;, &#39;Johnson&#39;, &#39;Lucy&#39;];
 constructor(privete translateService: TranslateService) {
 }
 ngOnInit() {
  this.demoTitle = this.translateService.translate(&#39;app.base.hello&#39;);
 }
}

登录后复制

以上流程基本上能满足大部分angular项目的国际化需求，如果需要更加复杂的国际化情况，欢迎讨论。

总结

Angular到5.0的国际化已经相对来说简便了很多，我们只需要在合适的地方打上i18n的tag即可方便快速地提取需要翻译文案，具体如何处理翻译后的文件因人而异，多种方法可帮助我们转换(如本文通过nodejs)。

复杂一点的是无法通过打i18n标签来翻译的文本，NG-ZORRO的国际化方案弥补了这方面的不足，结合起来可以很方便地完成项目的国际化。国际化如果没有专门的团队支持，翻译难度很大，需要考虑的东西很多，比如繁体还有澳门繁体、台湾繁体等，语法也不尽相同。

参考目录

Angular的国际化（i18n）在线例子
NG-ZORRO Locale 国际化

上面是我整理给大家的，希望今后会对大家有帮助。

用JQuery如何实现表单验证，具体应该怎么做？

使用Vue如何设置多个Class

在SpringMVC中post如何获取多选框value的值（代码实例）

jQuery+SpringMVC中的复选框选择与传值实例_jquery

以上是使用Angular如何实现国际化（详细教程）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7478

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub

使用Gin框架实现国际化和多语言支持功能 Jun 23, 2023 am 11:07 AM

随着全球化的发展以及互联网的普及，越来越多的网站和应用开始致力于实现国际化和多语言支持功能，以满足不同人群的需求。为了实现这些功能，开发者需要使用一些先进的技术及框架。在本文中，我们将介绍如何使用Gin框架来实现国际化和多语言支持功能。Gin框架是一个轻量级的Web框架，由Go语言编写。它具有高效、易用和灵活等特点，已经成为了许多开发者的首选框架。除此之外，

使用FastAPI框架构建国际化的Web应用 Sep 29, 2023 pm 03:53 PM

使用FastAPI框架构建国际化的Web应用FastAPI是一个高性能的PythonWeb框架，它结合了Python类型注解和性能较好的异步支持，使得开发Web应用变得更加简单、快速和可靠。在构建一个国际化的Web应用时，FastAPI提供了方便的工具和理念，可以使得应用能够轻松支持多种语言。下面我将给出一个具体的代码示例，介绍如何使用FastAPI框架构

如何使用PHP和Angular进行前端开发 May 11, 2023 pm 04:04 PM

随着互联网的飞速发展，前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言，可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架，可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发，以及如何将它们

Angular组件及其显示属性：了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装，并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display，Angular组件的显示可以完全控制，从而实现所需的布局和响应能力。

使用Angular和Node进行基于令牌的身份验证 Sep 01, 2023 pm 02:01 PM

身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时，您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前，让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码，然后点击登录。发出请求后，通过查询数据库在后端验证用户。如果请求有效，则使用从数据库中获取的用户信息创建会话，然后在响应头中返回会话信息，以便将会话ID存储在浏览器中。提供用于访问应用程序中受

PHP8.0中的国际化库 May 14, 2023 pm 05:51 PM

PHP8.0中的国际化库：UnicodeCLDR和Intl扩展随着全球化的进程，开发跨语言、跨地域的应用程序变得越来越普遍。国际化是实现这一目标的重要组成部分。在PHP8.0中，引入了UnicodeCLDR和Intl扩展，这两个组件都为开发者提供了更好的国际化支持。UnicodeCLDRUnicodeCLDR（CommonLocaleDat

如何使用Webman框架实现国际化和多语言支持？ Jul 09, 2023 pm 03:51 PM

如今，随着互联网技术的不断发展，越来越多的网站和应用程序需要支持多语言和国际化。在Web开发中，使用框架可以极大地简化开发过程。本文将介绍如何使用Webman框架实现国际化和多语言支持，同时提供了一些代码示例。一、什么是Webman框架？Webman是一个基于PHP的轻量级框架，提供了丰富的功能和易于使用的工具，用于开发Web应用程序。其中之一就是国际化和多

See all articles

使用Angular如何实现国际化（详细教程）

背景

Angular i18n

部署翻译文件

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

总结

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题