我正在使用最新的Angular5构建应用程序,我需要的是用户能够切换语言.我从来没有在Angular2 +中实现它(实际上我使用的是Angular5).
我需要在两个地方设置翻译:
我正在寻找ngx-translation,它看起来可以做我需要的一切,因为它允许你在不重建代码的情况下更改语言,请参阅此处.但是我读到它可能会被弃用,因为主要开发人员转向角度团队来开发他们的i18n代码.
我也明白,目前的i18n并不支持我现在需要的一切,请看这里.
我的问题 - 在最新版本的Angular中翻译的状态是什么?是否还有其他人推荐的图书馆,如果确实如此,Angular本身还没有完全支持(用于更改语言而不重新编译)?ngx-translate对未来有益吗?
非常感谢在这方面的任何指导!
internationalization angular-i18n ngx-translate angular angular5
我目前通过这种方式在" en-US " 上定义" LOCALE_ID " :
@NgModule({
providers: [{ provide: LOCALE_ID, useValue: "en-US" }, ...],
imports: [...],
bootstrap: [...]
})
Run Code Online (Sandbox Code Playgroud)
它运作得很好.但是,为了测试法语中日期的样子,我用" fr-FR " 替换了" en-US " 然后我得到了错误:
缺少区域设置"fr-FR"的区域设置数据.
我做了一些研究,但没有发现任何与之相关的内容.法语的语言环境是否包含在默认包中?这是一个不同的包吗?我必须自己创建它们吗?
我正在使用角度6进行大型项目.该项目需要大量的i18n集成.我正在努力做出正确的决定如何继续.
我看到它的方式是我可以选择:
我倾向于选择选项2; Angular的i18n.这是因为它是Angular自己的内置包,而且对我来说更好.显然它对SEO也更好,并且在没有任何解决方法的情况下性能稍微好一些.此外,现在它发布我认为ngx-translate可能已被弃用.很多信息在这里:Angular 5国际化.
不过这是我的保留:
有没有办法用角度i18n进行实时语言切换?即在不重新加载/从服务器获取数据的情况下切换页面上的语言?这就是他们所说的JIT吗?
有没有人试过https://github.com/robisim74/angular-l10n?看起来也很好.
非常感谢.最好的祝福.
我正在使用Angular Internationalization (i18n)以两种不同的语言 (fa/en) 开发应用程序。
我可以提供任何这样的本地化(语言)
"architect": {
"build": {
...
,
"configurations": {
...
},
"fa": {
"localize": ["fa"],
"baseHref": "/fa/"
},
"en": {
"localize": ["en"],
"baseHref": "/en/"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"en": {
"browserTarget": "app:build:en"
},
"fa": {
"browserTarget": "app:build:fa"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
...
}
Run Code Online (Sandbox Code Playgroud)
然后ng serve …
从 Angular 9 开始,我们可以使用
$localize`Hello ${name}:name:`
Run Code Online (Sandbox Code Playgroud)
对于打字稿代码中的 i18n。这仍然有一些限制,因为该ng xi18n命令不检测字符串,但如果将这些文本手动添加到翻译文件中,它就可以工作。
该$localize函数在源代码的JSDoc 中有很好的记录,但是它没有解释如何使用复数。我的意思是这样的(伪代码):
$localize`Hello {${count}, plural, =1 {reader} other {readers}}`
Run Code Online (Sandbox Code Playgroud)
这可能$localize吗?如果是:如何?如果不是:Angular 如何将此类表达式从 HTML 编译为 TypeScript?
我有一个多语言的应用程序,使用每种语言的--aot编译,例如德语:
ng build --aot --env=prod --prod --build-optimizer --i18nFile=src/locale/DARI_messages_de_DE.xlf --i18nFormat=xlf --locale=de --missingTranslation warning --output-path dist/de --base-href /de/
Run Code Online (Sandbox Code Playgroud)
我们需要在运行时获取locale的值,以便将它处理到我们的后端.
如果看起来试图得到
import { LOCALE_ID } from '@angular/core';
constructor(private modalService: BsModalService) {
console.log("LOCALE_ID", LOCALE_ID);
}
Run Code Online (Sandbox Code Playgroud)
但是LOCAL_ID是空的我认为它只适用于JIT
是否有任何方法可以在运行时获取此参数?
我在这里阅读了整个文档:https://angular.io/guide/i18n
我不能对我应该如何处理这种性质的html标签做出正面或反面:
<div i18n="@@myId" class="title-text">{{currentPage}}</div>
Run Code Online (Sandbox Code Playgroud)
或者像这样:
<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>
Run Code Online (Sandbox Code Playgroud)
它根本没有提到任何变量文本,好像它们只是假设我们将所有名称和文本硬编码到html中.
语言文件应该如下所示:
<?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="myId" datatype="html">
<source>Hello</source>
<target>Bonjour</target>
</trans-unit>
</body>
</file>
</xliff>
Run Code Online (Sandbox Code Playgroud)
我可以做这样的事情来处理var的多种可能性吗?
<?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="myId" datatype="html">
<source>Title 1</source>
<target>Titre 1</target>
<source>Help 2</source>
<target>Aide 2</target>
<source>New 3</source>
<target>Nouveau 3</target>
</trans-unit>
</body>
</file>
</xliff>
Run Code Online (Sandbox Code Playgroud)
我认为这不会起作用.我该如何处理变量?
更新:
如果我使用他们的语言文件生成工具:
ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr
Run Code Online (Sandbox Code Playgroud)
我明白了: …
我正在尝试构建一个支持多种语言的应用程序——实际上多达 20 种。
默认语言是en-US. 在构建过程中,会创建可以正常工作的翻译版本。
但是,在所有构建中,LOCALE_ID始终是en-US. 所以我不能依赖管道等中的语言环境。它没有使用构建配置中设置的语言环境进行更新。
在编译每个语言环境时,我也收到此警告(此处为德语):
找不到“de-DE”的语言环境数据。此语言环境将不包含任何语言环境数据。
这是构建配置在angular.json中的外观:
"production-de": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"outputPath": "dist/de",
"baseHref": "/de/",
"i18nLocale": "de-DE",
"i18nFile": "src/locale/messages/messages.de.xlf",
"i18nFormat": "xlf"
},
Run Code Online (Sandbox Code Playgroud)
使用以下命令构建应用程序:
ng build …Run Code Online (Sandbox Code Playgroud) internationalization typescript angular-i18n angular angular9
我准备了具有本地化语言版本的应用程序。为此,我使用了原生的 Angular i18n 模块,该模块准备了两个应用程序包,每个包都有相应的语言。
应用程序的每个版本都可以在我的 nginx 服务器上的各个位置下使用:
我希望我的应用程序作为 PWA安装一次,并使用(单个?)服务工作者提供两种语言版本。
不幸的是,我现在对@angular/pwa 模块所能做的就是为每个应用程序提供一个单独的服务工作者,这迫使我的应用程序的每个语言版本都单独安装。
我的问题是:应用程序有没有办法按照我使用@angular/pwa 或 Workbox描述的方式工作?
// 顺便说一下,Angular 的创建者没有强调@angular/localize 与@angular/pwa 的集成,这有点令人惊讶。
nginx internationalization progressive-web-apps angular-i18n angular
所以我有一个 Angular 11 应用程序,我刚刚使用 Angulars 默认的 i18n 中间件实现了本地化。
要创建一个初始文件,我刚刚运行:
ng extract-i18n myprojectName --format xlf --output-path src/i18n --out-file messages.da.xlf --progress
Run Code Online (Sandbox Code Playgroud)
一切都很好,我得到了一个带有默认语言翻译的 messages.da.xlf 文件。
现在我想将应用程序翻译成英语。
我复制了 messages.da.xlf 文件并将其命名为 messages.en.xlf 并翻译了所有内容。
现在一切都很好。
但现在我有一个问题,下次我添加要翻译的附加文本时,英语翻译不会更新。
所以我的问题是,当我因为应用程序中的新功能而需要扩展翻译时,我如何知道必须将哪些附加“字段”添加到所有翻译文件中,以及是否有办法自动执行此操作?