更新 : 2017-06-17

<h1 i18n="site header|An introduction header for this sample">Hello {{ name }} world</h1>
<source>Hello <x id="INTERPOLATION"/> world</source>

<target>哈喽 <x id="INTERPOLATION"/> 世界</target>

angular 支持 interpolation {{  }}

你要在 target 去掉 interpolation 也是 ok 的.

说说真实项目中的场景. 除了这种能写在模板上的翻译，我们通常还有一些动态的翻译比如 sql 资料.

比如 :

class Member

{

    name_en : string;

    name_cn : string;

}

我的做法是为每一个 member 对象添加一个 name 属性, getter(){ if( this.locale == 'zh-CN'...) { return this.... } }

import { LOCALE_ID, Inject } from '@angular/core';
constructor( @Inject(LOCALE_ID) private locale: string) { }

locale 如果没有使用 i18n 的话，会拿 user-agent 的哦

日期 : 2017-04-24

refer :

https://v2.angular.io/docs/ts/latest/cookbook/i18n.html#!#aot

https://github.com/angular/angular-cli/issues/2201

http://blog.danieleghidoli.it/2017/01/15/i18n-angular-cli-aot/

针对翻译, ng 提供了一个解决方案.

流程大概是这样的.

在写模板的时候我们通过一些记号, 标识出要翻译的部分

<h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>

类似上面这样, i18n 是个标识, 内容是一些描述

所有模板都写好了以后

windows cmd 运行 "./node_modules/.bin/ng-xi18n" --i18nFormat=xlf

这时 ng 会从我们的模板中提取这些标识的内容创建出一个 messages.xlf 的 file.

<?xml version="1.0" encoding="UTF-8" ?>

<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 id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">

        <source>Hello i18n!</source>

        <target>我爱你妈</target>

        <note priority="1" from="description">An introduction header for this sample</note>

        <note priority="1" from="meaning">User welcome</note>

      </trans-unit>

    </body>

  </file>

</xliff>

大致上长这样, <target> 一开始是空着的, 我们把翻译写进去.

如果你支持很多语言，那么就 copy paste 这个 file 给每个 file 一个特别的名字比如 : messages.cn.xlf, messages.en.xlf

翻译完成了以后

cmd : ng build --prod --i18nFile=./src/locale/messages.zh-cn.xlf --locale=zh-CN --i18nFormat=xlf --bh=/cn/ --output-path=cn

ng serve --aot --i18nFile=./src/locale/messages.zh-cn.xlf --locale=zh-CN --i18nFormat=xlf  (只有 aot 可以跑 ng serve 哦)

bh 是 base href, output-path 默认是 dist, 因为我们有很多版本语言, 所以我们需要重复 build 很多个版本出来.

最后就是 publish to server 咯.

整个流程看完. 我们可以了解到, ng 的做法是让每个语言独立一个 index.html 版本.

好处是快咯，隔离的好咯

坏处是, 如果要改视乎 rebuild 的工作量不少. 当然我觉得这个应该是最后的环节了. 不太可能一直改.

网页中除了一般的静态资料需要翻译，动态资料也是需要翻译的，比如 sql 的 data, alert error message. 这些不在 ng 包含的范围内, 我们得自己处理哦。

外传 :

refer : https://github.com/googlei18n/libphonenumber

介绍一下 google i18n/ libphonenumber

做国际站, 电话号码也是需要处理好的.

npm install google-libphonenumber --save

npm install @types/google-libphonenumber --save-dev ( 版本可能不够新哦, 比如目前是 7.4 但是 lib 已经 8.4 了, getSupportRegions 方法就没找着 /.\ )

import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber';

let sg = '+65 9026 9356';

let phoneUtil = PhoneNumberUtil.getInstance();

let number = phoneUtil.parse(sg, '');

let code = phoneUtil.getRegionCodeForNumber(number); //SG

let ok = phoneUtil.isValidNumber(number);

let formatA = phoneUtil.format(number, PhoneNumberFormat.INTERNATIONAL); //+65 9026 9356

let formatB = phoneUtil.format(number, PhoneNumberFormat.NATIONAL); // 9026 9356
  let list = phoneUtil['getSupportedRegions'](); //typesciprt 每这个方法, 因为版本不够新, 但依然是可以用的啦. 

需要注意的是，任何操作都是使用 phone number 对象, 所以记得要 parse.

主要用途是验证是不是 phone number, 还有转换格式.

除了 js 还有其它版本的哦，比如 c#.

public ActionResult Index()

{

    var sg = "+65 9026 9356";

    var phoneUtil = PhoneNumberUtil.GetInstance();

    var number = phoneUtil.Parse(sg, "");

    var code = phoneUtil.GetRegionCodeForNumber(number); //SG

    var ok = phoneUtil.IsValidNumber(number);

    var formatA = phoneUtil.Format(number, PhoneNumberFormat.INTERNATIONAL); //+65 9026 9356

    var formatB = phoneUtil.Format(number, PhoneNumberFormat.NATIONAL); // 9026 9356

    List<string> x = phoneUtil.GetSupportedRegions().ToList();

    int codex = phoneUtil.GetCountryCodeForRegion(x[]);

    return View();

}

angular2 学习笔记 ( translate, i18n 翻译 )的更多相关文章

  1. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  2. Angular2学习笔记(1)——Hello World

    1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...

  3. angular2 学习笔记 ( rxjs 流 )

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  4. angular2 学习笔记 ( ngModule 模块 )

    2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...

  5. Angular2学习笔记——路由器模型（Router）

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...

  6. Angular2学习笔记——Observable

    Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...

  7. Angular2学习笔记——在子组件中拿到路由参数

    工作中碰到的问题,特此记录一下. Angular2中允许我们以`path\:id\childPath`的形式来定义路由,比如: export const appRoutes: RouterConfig ...

  8. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  9. angular2 学习笔记 (Pipes)

    Pipe 就是 ng1 的 filter <pre>{{ jsonValue | json }}</pre> 用法看这里就很清楚了 : https://angular.cn/d ...

随机推荐

  1. 为什么覆写equals必须要覆写hashCode？

    ============================================= 原文链接: 为什么覆写equals必须要覆写hashCode? 转载请注明出处! ============= ...

  2. Oracle GoldenGate实现数据库同步

    前言:最近刚好在弄数据库同步,网上查了些资料再加上自己整理了一些,做个分享! 一.GoldenGate的安装 1.安装包准备 数据库版本:Oracle Database 11g Release 2(1 ...

  3. Unity3D项目程序加密-VirboxProtector加壳工具

    各位Unity3D的开发者,你还为你的代码被反编译而头疼, 混淆和加密已经失效,为内存dump代码而烦恼?是否辛苦制作的游戏被盗版被抄袭而烦恼? 是否害怕算法被别人参考要把算法写成C++而费劲周折? ...

  4. 剑指Offer-孩子们的游戏(圆圈中最后剩下的数)

    package Other; import java.util.LinkedList; /** * 孩子们的游戏(圆圈中最后剩下的数) * 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友, ...

  5. C语言第三次博客作业---单层循环结构

    一.PTA实验作业 题目1 1.实验代码 int N,i; //N为用户数,i记录循环变量 double height; //height放身高 char sex; //sex放性别F为女,M为男 s ...

  6. MYSQL数据库学习十八 数据库维护和性能提高

    18.1 数据备份 可能造成数据损失的原因有: 存储介质故障:保存数据库文件的磁盘设备损坏,用户没有数据库备份导致数据彻底丢失. 用户的错误操作:如误删了某些重要数据,甚至整个数据库. 服务器的彻底瘫 ...

  7. Eclipse+Pydev环境搭建

    1,准备好Eclipse和JAVA,x64 2,安装JDK,配置JAVA环境变量,假设安装路径为 C:\Program Files\Java\jdk1.8.0_161 在系统变量中,新建CLASSPA ...

  8. C语言函数嵌套调用作业

    一.实验作业 1.1 PTA题目:6-4 十进制转换二进制 设计思路 如果n大于1 对n/2继续进行该函数运算 输出n%2的值 代码截图 调试问题 我第一次做的时候判断的边界条件是大于0继续进行运算, ...

  9. 操作 numpy 数组的常用函数

    操作 numpy 数组的常用函数 where 使用 where 函数能将索引掩码转换成索引位置: indices = where(mask) indices => (array([11, 12, ...

  10. django的模板（二）

    模板(二) 实验简介 本节继续介绍模板的常用标签,for.if.ifequal和注释标签. 一.基本的模板标签和过滤器 1. 标签 if/else {% if %} 标签检查(evaluate)一个变 ...