cir*_*rcy 8 internationalization webpack ng2-translate angular
我想用angular2构建一个web应用程序,并将其与webpack捆绑在一起.提供多种语言的最佳方式是什么:
i18n-plugin:https://github.com/webpack/i18n-webpack-plugin
要么
ng2-translate:https://github.com/ocombe/ng2-translate
小智 9
我使用cookbook开始使用webpack.必须将xliff文件转换为ts,如下所示:
export const TRANSLATION_SV = `<?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="a73e2898b9e1126ed19dbabe4b5c3715a84db61a" datatype="html">
<source>Category</source>
<target>Kategori</target>
</trans-unit>
</body>
</file>
</xliff>`;然后在main.ts中必须添加它
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { TRANSLATION_SV } from './locale/messages.sv';
并插入引导步骤:
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [
{provide: TRANSLATIONS, useValue: TRANSLATION_SV},
{provide: TRANSLATIONS_FORMAT, useValue: "xlf"},
{provide: LOCALE_ID, useValue:'sv'}
];
});
如果您使用angular-cli,可以按照以下步骤操作:
请注意,您的应用必须是AOT兼容,因此您应该能够使用
--aot交换机构建它:Run Code Online (Sandbox Code Playgroud)ng build --aot
使用ng xi18n带有翻译文件位置的命令提取消息:
ng xi18n --output-path src/i18n
你会得到src/i18n/messages.xlf档案.复制此文件并将消息翻译为您需要的语言:
src/i18n/messages.en.xlf
src/i18n/messages.pl.xlf
使用ng serve / ng build命令服务/构建您的应用程序(相应地更改区域设置):
ng serve --i18n-file=src/i18n/messages.en.xlf --locale=en --i18n-format=xlf --aot
小智 6
如果有人仍然想知道如何使用webpack加载器进行角度2本地化,我已经修改了提供的angular 2 cookbook;
首先 创建i18n.provider.ts
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
import { Observable } from "rxjs/Rx";
export function getTranslationProviders(): Promise<Object[]> {
// Get the locale id from the global
const locale = document['locale'] as string;
// return no providers if fail to get translation file for locale
const noProviders: Object[] = [];
// No locale or U.S. English: no translation providers
if (!locale || locale === 'en') {
return Promise.resolve(noProviders);
}
// Ex: 'locale/messages.fr.xlf`
const translationFile = `./src/app/localezation/messages.${locale}.xlf`;
var provider = getTranslationsWithSystemJs(translationFile)
.then((translations: string) => [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale }
])
.catch(() => noProviders); // ignore if file not found
debugger;
return provider;
}
declare var System: any;
function getTranslationsWithSystemJs(file: string) {
// changes Start here
var text = "";
var fileRequest = new XMLHttpRequest();
fileRequest.open("GET", file, false);
fileRequest.onerror = function (err) {
console.log(err);
}
fileRequest.onreadystatechange = function () {
if (fileRequest.readyState === 4) {
if (fileRequest.status === 200 || fileRequest.status == 0) {
text = fileRequest.responseText;
}
}
}
fileRequest.send()
var observable = Observable.of(text);
var prom = observable.toPromise();
return prom;
}
注意这些变化是:
main.ts文件中的第二个更改bootstrapping与angular cookbook中提到的相同
getTranslationProviders().then(providers => {
const options = { providers };
platformBrowserDynamic().bootstrapModule(AppModule, options);
});
Angular 2 Final版本具有 i18n 原生支持https://angular.io/docs/ts/latest/cookbook/i18n.html
检查另一个答案/sf/answers/2730284091/，其中包含示例和有关用法的一些详细信息。
与本机实现相比， ng2-translate过于冗长。ng2- translate 的作者也是Angular 2 i18n 文档的重要贡献者
| 归档时间： |
|
| 查看次数： |
10191 次 |
| 最近记录： |