Angular使用内置i18n国际化配置Angular国际化
Angular 使用内置i18n国际化
- 前言
- 1.环境准备
- 2.添加格式化标识
- 3.生成翻译模板语言包
-
-
- 第一种生成方式
- 第二种生成方式
-
- 4.语言文件的介绍与使用（messages.xlf）
-
-
- 介绍：
- 范本：
- trans-unit：
- source：
- target:
-
- 5.实现多国语言创建
-
-
- 第一步
- 第二步
- 第三步
- 结语：
-
- 6.配置angular.json
-
-
- 第一步：
- 第二步：
-
- 7.最后一步启动
- 8.补录多环境启动
前言
此文使用Angular官方工具完成国际化，优势原滋原味，贴合angular设计！我喜欢采用12345步骤法分享。喜欢的朋友点点关注不迷路。定时更新跟多 Angular 文章
1.环境准备
// 添加本地包
ng add @angular/localize
2.添加格式化标识
// 第一种添加方式
Hello i18n!
// 第二种方式 通过 @@xxx 来自定义id
Hello i18n!
3.生成翻译模板语言包
第一种生成方式
在src/locale/ 下生成基础文件 messages.xlf
ng extract-i18n --output-path src/locale/
第二种生成方式
指定生成src/locale/messages.xlf
ng extract-i18n --out-file src/locale/messages.xlf
4.语言文件的介绍与使用（messages.xlf）
介绍：
中文名是XML本地化数据交换格式，一种格式而已
范本：
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="zh-CN" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="8def8481e91291a52f9baa31cbdb313e6a6ca02b" datatype="html">
<source>Hello i18n!source>
<target>你好 i18n!target>
trans-unit>
body>
file>
xliff>
trans-unit：
表示一个转化单元，内部涵盖 ， 等标签，主要讲解这两标签
source：
表示原本的文本
target:
表示译文
5.实现多国语言创建
第一步
打开src/locale/messages.xlf文件复制一份
第二步
修改 src/locale/messages copy.xlf 文件为 messages.zh.xlf 表示为中文语言模板
第三步
修改 messages.zh.xlf 文件的file标签的属性source-language=“zh-CN”（可以搜索找file即可找到）
结语：
重复以上步骤完成对其他语言的扩展
6.配置angular.json
第一步：
配置 projects-> architect-> configurations
{
"projects":{
"architect":{
"configurations":{
"zh": {
"aot": true,
"outputPath": "dist/zh/",
"i18nFile": "src/locale/messages.zh.xlf",
"i18nFormat": "xlf",
"i18nLocale": "zh",
"i18nMissingTranslation": "error"
},
"en": {
"aot": true,
"outputPath": "dist/en/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error"
},
}
}
}
}
第二步：
配置 serve->configurations
"serve": {
"configurations": {
"zh": {
"browserTarget": "i18ndemo:build:zh"
},
"en": {
"browserTarget": "i18ndemo:build:en"
},
}
}
"browserTarget": “i18ndemo:build:zh”
i18ndemo 此处应该换成您的工程名字
7.最后一步启动
启动英文环境 ng serve --configuration=en
启动中文环境ng serve --configuration=zh
启动饿文环境 ng serve --configuration=ru
8.补录多环境启动
把三个包都打出来即可
或者在package.json中的scripts 下添加:
"build:en_zh_ru":"ng build --configuration=en && ng build --configuration=zh && ng build --configuration=ru"
启动使用：npm run build:en_zh_ru
点击链接加入群聊 【Cordova/Angular/Ionic/ 中文社区】群文件内有免费全集angular教程
进入方式点击连接
https://jq.qq.com/?_wv=1027&k=rk6cVCiN
或
