详解使用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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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
php下intval()和(int)转换使用与区别
2008/07/18 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
深入了解js原型模式
2019/05/30 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
python list语法学习(带例子)
2013/11/01 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Python流程控制常用工具详解
2020/02/24 Python
python中元组的用法整理
2020/06/15 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
shell程序中如何注释
2012/01/28 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
教师旷工检讨书
2014/01/18 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书