详解使用angular-cli发布i18n多国语言Angular应用


Posted in Javascript onMay 20, 2017

在模板html标签中增加i18n

<h1 i18n>Hello world!</h1>

使用ng命令产生xlf格式的message.xlf文件

$ ng xi18n --output-path src/i18n

命令执行后,生成 src/i18n/messages.xlf 文件

<?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="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target/>
   </trans-unit>
  </body>
 </file>
</xliff>

复制message.xlf,message.en.xlf(英文版本) message.zh.xlf中文版本

<?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="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target>Hello World!</target>
   </trans-unit>
  </body>
 </file>
</xliff>

<?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="5816217f424111ae4c91dd72ee1db0ae252763b5" datatype="html">
    <source>Hello World!</source>
    <target>哈喽,世界!</target>
   </trans-unit>
  </body>
 </file>
</xliff>
$ ng serve --aot \
      --i18n-file=src/i18n/messages.zh.xlf \
      --locale=zh \
      --i18n-format=xlf

现在浏览,显示的是中文版本

$ for lang in en zh; do \
  ng build --output-path=dist/$lang \
       --aot \
       -prod \
       --bh /$lang/ \
       --i18n-file=src/i18n/messages.$lang.xlf \
       --i18n-format=xlf \
       --locale=$lang; \
 done

这个命令执行完毕后,生成了en和zh两种语言版本。http://localhost:4200/en访问英文版本,http://localhost:4200/zh访问中文版本。--bh指定默认版本,http://localhost:4200访问时,跳转到默认版本。

修改package.json文件,加入脚本

{
 [...]
 "scripts": {
  [...]
  "build-i18n": "for lang in en zh; do ng build --output-path=dist/$lang --aot -prod --bh /$lang/ --i18n-file=src/i18n/messages.$lang.xlf --i18n-format=xlf --locale=$lang; done"
 }
 [...]
}

这样就可以执行npm run build-i18n 命令,一次build多个语言版本了。

windows用户命令

> ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh
> ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en

package.json脚本

"scripts": {
  "build-i18n:es": "ng build --output-path=dist/zh --aot -prod --bh /zh/ --i18n-file=src/i18n/messages.zh.xlf --i18n-format=xlf --locale=zh",
  "build-i18n:en": "ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
  "build-i18n": "npm run build-i18n:en ; npm run build-i18n:zh"
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数字时钟示例分享
Apr 23 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
使用js画图之饼图
Jan 12 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
jquery实现聊天机器人
Feb 08 jQuery
js实现坦克大战游戏
Feb 24 Javascript
ztree实现权限横向显示功能
May 20 #Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 #Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 #Javascript
微信小程序利用co处理异步流程的方法教程
May 20 #Javascript
关于jQuery库冲突的完美解决办法
May 20 #jQuery
layui文件上传实现代码
May 20 #Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
MySQL中create table语句的基本语法是
2007/01/15 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
js canvas实现写字动画效果
2018/11/30 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
女方回门宴答谢词
2014/01/14 职场文书
运动会广播稿200字
2014/01/15 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
中小学生学籍证明
2014/10/25 职场文书
庆六一开幕词
2015/01/29 职场文书
学雷锋活动简报
2015/07/20 职场文书