标签: angular-i18n

Angular 5国际化

我正在使用最新的Angular5构建应用程序,我需要的是用户能够切换语言.我从来没有在Angular2 +中实现它(实际上我使用的是Angular5).

我需要在两个地方设置翻译:

  • 组件的模板html - 将标签更改为指定的语言
  • 在component.ts文件的代码中 - 我可能需要翻译一些在代码中的特定条件下动态构建的字符串

我正在寻找ngx-translation,它看起来可以做我需要的一切,因为它允许你在不重建代码的情况下更改语言,请参阅此处.但是我读到它可能会被弃用,因为主要开发人员转向角度团队来开发他们的i18n代码.

我也明白,目前的i18n并不支持我现在需要的一切,请看这里.

我的问题 - 在最新版本的Angular中翻译的状态是什么?是否还有其他人推荐的图书馆,如果确实如此,Angular本身还没有完全支持(用于更改语言而不重新编译)?ngx-translate对未来有益吗?

非常感谢在这方面的任何指导!

internationalization angular-i18n ngx-translate angular angular5

44
推荐指数
2
解决办法
3万
查看次数

缺少具有角度的区域设置"XXX"的区域设置数据

我目前通过这种方式在" 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"的区域设置数据.

我做了一些研究,但没有发现任何与之相关的内容.法语的语言环境是否包含在默认包中?这是一个不同的包吗?我必须自己创建它们吗?

angular-i18n angular

24
推荐指数
2
解决办法
2万
查看次数

Angular 6 - i18n vs. ngx-translate

我正在使用角度6进行大型项目.该项目需要大量的i18n集成.我正在努力做出正确的决定如何继续.

我看到它的方式是我可以选择:

  1. ngx-translate(https://github.com/ngx-translate/core)
  2. Angular i18n(https://angular.io/guide/i18n)

我倾向于选择选项2; Angular的i18n.这是因为它是Angular自己的内置包,而且对我来说更好.显然它对SEO也更好,并且在没有任何解决方法的情况下性能稍微好一些.此外,现在它发布我认为ngx-translate可能已被弃用.很多信息在这里:Angular 5国际化.

不过这是我的保留:

有没有办法用角度i18n进行实时语言切换?即在不重新加载/从服务器获取数据的情况下切换页面上的语言?这就是他们所说的JIT吗?

有没有人试过https://github.com/robisim74/angular-l10n?看起来也很好.

非常感谢.最好的祝福.

angular-i18n angular

23
推荐指数
2
解决办法
8669
查看次数

如何在开发过程中使用 ng serve 服务不同的 Angular 语言环境?

我正在使用Angular Internationalization (i18n)以两种不同的语言 (fa/en) 开发应用程序。

  • 目标是将两个不同的构建部署到服务器上的子文件夹中 (example.com/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-i18n angular

17
推荐指数
2
解决办法
7527
查看次数

如何将 angular 9 $localize 与复数一起使用?

从 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?

angular-i18n angular

12
推荐指数
1
解决办法
1748
查看次数

在运行时为AOT编译的Angular App获取--locale的值

我有一个多语言的应用程序,使用每种语言的--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

是否有任何方法可以在运行时获取此参数?

internationalization angular-i18n angular2-aot angular

9
推荐指数
2
解决办法
2342
查看次数

angular-i18n Angular 6国际化:如何处理变量

我在这里阅读了整个文档: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)

我明白了: …

angular-i18n angular

8
推荐指数
1
解决办法
1万
查看次数

如何在 Angular 9 中构建期间动态更新 i18n 站点的 localeData 和 LOCALE_ID?

我正在尝试构建一个支持多种语言的应用程序——实际上多达 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

8
推荐指数
1
解决办法
3991
查看次数

如何使用单个服务工作者启用多语言 Angular PWA 的安装?

我准备了具有本地化语言版本的应用程序。为此,我使用了原生的 Angular i18n 模块,该模块准备了两个应用程序包,每个包都有相应的语言。

应用程序的每个版本都可以在我的 nginx 服务器上的各个位置下使用:

  • myapp.com/en/...
  • myapp.com/pl/...

我希望我的应用程序作为 PWA安装一次,并使用(单个?)服务工作者提供两种语言版本。

不幸的是,我现在对@angular/pwa 模块能做的就是为每个应用程序提供一个单独的服务工作者,这迫使我的应用程序的每个语言版本都单独安装。

我的问题是:应用程序有没有办法按照我使用@angular/pwa 或 Workbox描述的方式工作?

// 顺便说一下,Angular 的创建者没有强调@angular/localize 与@angular/pwa 的集成,这有点令人惊讶。

nginx internationalization progressive-web-apps angular-i18n angular

8
推荐指数
1
解决办法
835
查看次数

如何处理 Angular 11 extract-i18n 覆盖现有翻译?

所以我有一个 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 并翻译了所有内容。

现在一切都很好。

但现在我有一个问题,下次我添加要翻译的附加文本时,英语翻译不会更新。

所以我的问题是,当我因为应用程序中的新功能而需要扩展翻译时,我如何知道必须将哪些附加“字段”添加到所有翻译文件中,以及是否有办法自动执行此操作?

angular-i18n angular angular-localize

8
推荐指数
1
解决办法
2371
查看次数