angular2 学习笔记 ( translate, i18n 翻译 )

时间 2019-11-24

标签 angular2 angular 学习笔记 translate i18n 翻译栏目 AngularJS 繁體版

原文原文链接

更新 : 2017-06-17html

<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 {{ }}node

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

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

好比 : sql

class Member
{
    name_en : string;
    name_cn : string;
}

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

import { LOCALE_ID, Inject } from '@angular/core';

constructor( @Inject(LOCALE_ID) private locale: string) { }

locale 若是没有使用 i18n 的话，会拿 user-agent 的哦 c#

日期 : 2017-04-24windows

refer : ui

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

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[0]);      
    return View();
}