Angular 2 原生国际化支持（一）

在Angular 1.x 的版本里面，没有原生的国际化支持，在前面的文章里面详细的分析了如何利用第三方库或者利用过滤器和指令实现国际化。而在Angular 2里面已经提供了原生的国际化支持。接下来我们一起看看如何实现Angular 2的国际化。

开发环境

• node 6.9.2
• npm 3.10.9
• angular 2.4.8
• compiler-cli 2.4.8
• webpack 2.2.1
• karma 1.5.0
• typescript 2.1.5
• gulp 3.9.1

安装

npm install

添加“i18n”指令

利用“i18n”属性标记需要翻译的内容，标签里面的内容将被抽取和翻译。

Hello i18n
This is a sample of internationalization in Angular2.
Attribute sample

Multiple Element Sample

Element 1
Element 2

Meaning Sample
Hello {{name}}

从模板抽取文本

在package.json里面定义npm task， 利用ng-xi18n抽取模板文件里面带有i18n属性的标签内容。

"scripts": {
    "i18n:extract": "ng-xi18n",
    ...

然后运行：

npm run i18n:extract 

注意：ng-xi18n在抽取HTML 标签里面的内容时不会掐掉前后的空白字符，这样直接会导致键不一致，因为键是取的文本的hash id。例如下面的情况，可见内容是相同的，但是被识别成两个条目。

Hello World!

  
Hello World! 
 

通过运行 ng-xi18n，中间翻译格式文件XLIF会生成在项目的根目录下：

  
  
 
   
     
       Hello World! 
        
      
     
       
       Hello World! 
        
        
     
    

正如所看到的，由于没有处理换行和空格导致生成了2条不同的Hash ID.

添加语言支持

npm run i18n:create "fr, en"  

src/resources/i18n/messages.fr.xlf  
src/resources/i18n/messages.en.xlf  

当各个语言的XLIFF文件模板生成后，如果有i18n内容的更新。需要重新生成XLIFF文件。

npm run i18n:extract  

合并上一版本的中间格式文件：

npm run i18n:update  

通过合并后，不同的内容有不同的表现：

• 相同的标签内容，将保持相同的翻译。
• 删除的内容会在新XLIFF文件里面移除。
• 更新的内容会添加到新的XLIFF文件里面。

当源XLIFF文件确定后，可以送翻译。翻译结束后，需要将XLIFF里面的翻译编译到ts文件里面。

npm run i18n:compile 

通过编译后，XLIFF文件里面的内容将添加到ts文件里面：

export const TRANSLATION_EN = `  
  
 
   
     
       Hello World!
       Hello World!-1
     
     
       
        Hello World!
    
       Hello World!-2
     
   
 

设置当前的语言

配置当前的语言，在main.ts里面定义Angluar 2 provider。

import "./polyfills.ts";

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
import { TRANSLATION } from './messages.fr';

if (environment.production) {
  enableProdMode();
}

// Compile using french translations
platformBrowserDynamic().bootstrapModule(
  AppModule,
  {providers: [
    {provide: TRANSLATIONS, useValue: TRANSLATION},
    {provide:TRANSLATIONS_FORMAT, useValue:'xlf'},
    {provide:LOCALE_ID, useValue:'fr'}
  ]});

上面只是一个简单的实现，下一节将提到一些优化的方案关于如何获取当前的语言。

运行和调试项目

npm start 

npm run test