目前最佳的实现Angular应用程序国际化的方式是什么？
Angular - 国际化（i18n）
4
- muetzerich
1
只是等到它真正实现了吗？还是回到使用Angular 1？ - Reda
4个回答
11
官方的i18n angular2将在最终发布之前的某个rc版本中实现。它也将比当前的解决方案更先进。
新的i18n概念如何在angular2中工作的更多信息：
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015
更新于2016年9月6日：
i18n支持现在已在Angular 2 RC6中正式发布
官方发布博客：
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html
一个使用Angular 2 RC6进行国际化的示例：
https://github.com/StephenFluin/i18n-sample
- Herman Fransen
1
大部分无用的回答，只是重复了@jhadesdev已经说过的话，但没有有用的部分。 - Stilgar
7
目前最好的选择是使用ng2-translate，它是著名的ng-translate在Angular 2中的端口。这很可能涵盖大部分使用情况。
稍后，在Angular 2中将有官方的i18n实现。
- Angular University
2
根据变更日志https://github.com/angular/angular/blob/master/CHANGELOG.md，在Angular 2 RC5中引入了一个重要的功能:
i18n: 合并翻译7a8ef1e
不幸的是，我仍然没有发现任何有用的文档。
但是，根据https://github.com/angular/angular/issues/9104，简单的情况已经得到了覆盖。
{{ 'TRANSLATION_ID' | translate }}
请在此文档中搜索“{{ 'TRANSLATION_ID' | translate }}”以获取更多相关细节信息。
- Andrei Zhytkevich
0
最近我写了一篇深入的文章关于这个...
国际化
介绍
ngx-i18nsupport的介绍很好地概括了问题
Angular有一种特定的处理国际化的方法（i18n），详见官方文档《Angular Cookbook Internationalization（i18n）》。简而言之，您需要在模板中标记待翻译的字符串，并使用属性i18n来进行翻译；使用Angular提取工具（ng-xi18n）将字符串提取到名为[XLIFF-1.2]的XML格式中；复制并翻译每种语言的提取文件；运行ng编译器以生成不同语言版本的特殊应用程序。但是，该工作流程存在一些主要差距。这就是此工具发挥作用的地方。首先，您必须创建完整的翻译，否则ng编译器将无法生成版本，不能部分翻译运行。其次，每当您更改应用程序中的内容时，都必须重新生成xliff，但是没有记录如何将此与已经存在的翻译文件合并的方式。有新的翻译单元需要合并，也有已经不存在的翻译单元。我们将使用ngx-i18nsupport工具包来解决这个问题。为i18n准备Angular-App
使用angular-cli安装@angular/localize包
ng add @angular/localize
在你的项目部分中，将部分添加到你的中。添加你需要的语言，并在必要时更改你的翻译源（在代码/HTML中使用的默认语言）如果可能，请勿使用英语。 同时确保为你的生产配置设置为。
{
...
"projects": {
"yourprojectname": {
"i18n": {
"sourceLocale": "en",
"locales": {
"de": "src/locale/messages.de.xlf",
"fr": "src/locale/messages.fr.xlf",
"it": "src/locale/messages.it.xlf"
}
},
...
"architect": {
"build": {
...
"configurations": {
"production": {
"localize": true,
...
安装 ngx-i18nsupport
运行以下命令以安装 ngx-i18nsupport
npm install -g ngx-i18nsupport
配置 xlf-merge
将以下块添加到 package.json 的根部，并根据您的需求进行更改。
"xliffmergeOptions": {
"srcDir": "src/locale",
"languages": [
"de",
"fr",
"it"
],
"preserveOrder": true,
"beautifyOutput": true
}
| 语言 | 你的应用程序需要支持的语言。确保它与你的 angular.json 中的 i18n 定义相匹配！ |
| srcDir | 翻译文件的输出目录。确保它与你的 angular.json 中的 i18n 定义相匹配！ |
| preserveOrder | 确保你的翻译顺序不会改变（不按 abc 或其他方式排序）。这使得比较不同版本的翻译文件更容易。 |
| beatifyOutput | 美化 XML 格式 |
在代码中添加一些翻译
确保你的应用程序中有实际的翻译内容，例如：
<p i18n>Some random pagagraph that needs translation</p>
或者
alert($localize `User ${username} doesn't exist!`);
生成翻译文件
运行以下命令以生成翻译文件。如果您更改了--output-path，请相应地进行更改。
ng extract-i18n --output-path src/locale
现在调用xliffmerge来解决介绍中提到的问题。
xliffmerge
Recommendation Add this Command to the
scripssection in your
package.json"scripts": { "translate": "ng extract-i18n --output-path src/locale && xliffmerge", "xliffmerge": "xliffmerge", ...You can run
npm run translateany time you want to upate translations.
在不同语言中测试您的应用程序
您可能想要测试您的应用程序在特定语言下的翻译效果。
添加构建配置和服务选项，为应用程序中使用的每种语言设置本地化语言。
提示 不要忘记替换 yourprojectname
angular.json
{
...
"projects": {
"yourprojectname": {
...
"architect": {
"build": {
...
"configurations": {
"de": {
"localize": ["de"]
},
"fr": {
"localize": ["fr"]
},
"it": {
"localize": ["it"]
}
...
}
},
"serve": {
...
"configurations": {
...
"development-de": {
"browserTarget": "yourprojectname:build:development,de"
},
"development-fr": {
"browserTarget": "yourprojectname:build:development,fr"
},
"development-it": {
"browserTarget": "yourprojectname:build:development,it"
}
在所需的语言中运行您的应用程序
ng serve -o --configuration=development-de
Recommendation Add a script starting your app in your apps supported langauges simultanialy each language on a different port
package.json"scripts": { "start": "ng serve -o", "start-de": "ng serve -o --configuration=development-de --port=4201", "start-fr": "ng serve -o --configuration=development-fr --port=4202", "start-it": "ng serve -o --configuration=development-it --port=4203", ...Now you can run your app simultaneously in any language you like
npm run start-de.Have Fun!
- Daniel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接