【问题标题】:angular-i18n Angular 6 Internationalisation : How to deal with variablesangular-i18n Angular 6 Internationalization:如何处理变量
【发布时间】:2018-11-23 04:19:15
【问题描述】:

我在这里阅读了整个文档:https://angular.io/guide/i18n

我不知道应该如何处理这种性质的 html 标记:

<div i18n="@@myId" class="title-text">{{currentPage}}</div>

或者这样的:

<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>

它根本没有提及任何可变文本,就好像他们只是假设我们将所有名称和文本硬编码到 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>

我是否应该做这样的事情来处理 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>

我认为这行不通。如何处理变量?

更新:

如果我使用他们的语言文件生成工具:

ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr

我明白了:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
          <context context-type="linenumber">85</context>
        </context-group>
        <note priority="1" from="description">the title of the current route</note>
      </trans-unit>
    </body>
  </file>
</xliff>

很确定equiv-text="{{currentPage}}" 是垃圾。但它可能还需要测试。 与此同时,我无法让 ng serve 接受新配置。

再次更新:

ng serve --configuration=fr工作

您必须进一步编辑angular.json,官方文档中没有指定,但他们确实在这里讨论过:https://github.com/angular/angular-cli/wiki/stories-internationalization

好吧,我添加了一个 &lt;target&gt;Title&lt;/target&gt; 并且它可以工作,但这当然意味着现在 var 的每个值都返回“title”,无论如何。

在到处放置i18n 标签后,我在代码中遇到了这个问题:

 <dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>

那么现在呢?如何翻译传递给 dropzone 的消息?

【问题讨论】:

  • 为什么没有实际文本的元素需要翻译?

标签: angular angular-i18n


【解决方案1】:

这个 polyfill 似乎是目前最好的方法 - 它主要由负责 i18n 的 Angular 团队成员 Olivier Combe 编写:

https://github.com/ngx-translate/i18n-polyfill


对于 Angular 5,安装时需要 0.2.0 版本:

npm install @ngx-translate/i18n-polyfill@0.2.0 --save

对于 Angular 6,获取最新版本 - 当前为 1.0.0:

npm install @ngx-translate/i18n-polyfill@1.0.0 --save

我让 polyfill 适用于 JIT 和 AOT 编译,适用于 Angular 5(它也适用于 Angular 6)。以下是翻译成单一语言所需要做的事情(这是实现此功能的好方法 - 然后您可以稍后让多种语言工作):

使用 AOT 编译的注意事项:如果您使用 AOT 编译 翻译您的模板,翻译 .ts 文件中的消息 仍然会在运行时使用 JIT 编译完成(这就是为什么你 需要引用 TRANSLATIONSTRANSLATIONS_FORMAT 而不仅仅是 在构建脚本中注册它们)。


app.module.ts

将以下导入添加到您的根 Angular 模块:

import { TRANSLATIONS, TRANSLATIONS_FORMAT } from '@angular/core';
import { I18n } from '@ngx-translate/i18n-polyfill';

添加以下常量,并在根模块中指定提供程序:

// add this after import + export statements
// you need to specify the location for your translations file
// this is the translations file that will be used for translations in .ts files

const translations = require(`raw-loader!../locale/messages.fr.xlf`);

@NgModule({ ....

  providers:
  [
    I18n,
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'},
    ...

*.ts

在您要提供翻译的 .ts 文件中,添加以下内容:

import { I18n } from '@ngx-translate/i18n-polyfill';

constructor(private i18n: I18n) {
    console.log(i18n("This is a test {{myVar}} !", {myVar: "^_^"}));
}

这表明您甚至可以在要翻译的消息中包含插值。

您可以像这样使用 i18n 定义(即使用指定翻译“源”ID、含义、描述):

this.i18n({value: 'Some message', id: 'Some message id', meaning: 'Meaning of some message', description: 'Description of some message'})

您仍然需要提取消息,并且可以使用 ngx-extractor 工具来执行此操作。请参阅polyfill page 上的自述文件。

所有这些都与xliffmerge 兼容,这是一个很好的工具,可以自动合并您添加的任何翻译,而不会覆盖现有翻译。 Xliffmerge 还可以使用 Google 翻译自动执行翻译(您需要 Google 翻译 API 密钥)。为此,我按以下顺序进行提取和合并/翻译,我进行实际的 AOT 构建之前:

"extract-i18n-template-messages": "ng xi18n --outputPath=src/locale --i18n-format=xlf",
"extract-i18n-ts-messages": "ngx-extractor --input=\"src/**/*.ts\" --format=xlf --out-file=src/locale/messages.xlf",
"generate-new-translations": "xliffmerge --profile xliffmerge.json en fr es de zh"

网站特定语言版本的 AOT 版本如下所示:

"build:fr": "ng build --aot --output-path=dist/fr --base-href /fr/ --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr",

这个 polyfill 的当前状态:

这主要是由负责 i18n 的 Angular 团队成员 Olivier Combe 编写的。在这个阶段,这是一个“推测”的 polyfill,用于翻译 .ts 文件中的变量或字符串。它很可能会被 Angular 内置的 API 所取代,该 API 将非常相似,因此以后升级应该是可以合理管理的。这是来自 Github 页面的免责声明:

这个库是一个推测性的 polyfill,这意味着它应该 替换将来会出现的 API。 如果 API 不同,将在可能和必要的情况下提供迁移工具。

关于在即将发布的 Angular 6 小版本中对代码中变量/字符串的翻译的支持进行了一些讨论。

这是 Olivier Combe 的引述(从今年 3 月开始),来自 Github 上的以下讨论:

https://github.com/angular/angular/issues/11405

runtime i18n 的第一个 PR 已合并到 master 中,以及 一个 hello world 演示应用程序,我们将使用它来测试功能。有用 在运行时,并支持理论上的代码翻译,即使有 还没有为它服务。目前它的支持非常少(静态 字符串),我们正在努力添加新功能(我将 下周提取工作,然后是带占位符的动态字符串 和变量)。之后,我们将提供代码翻译服务。 一旦一个新特性完成它就会被合并到master中,你 不必等待新的专业。

【讨论】:

  • 啊,所以它确实是“待实现”的东西,你链接的 polyfill 现在会做得很好。 - -它是如何工作的?谢谢!
  • 还有关于 dropzone 标签的想法吗?
  • 无法成功运行。你可以吗?只要我像文档中所说的那样添加constructor(i18n: I18n) {。我的应用程序在浏览器阶段崩溃。自述文件中该位上方的内容不会导致应用崩溃。
  • 我目前正在进行测试。我已经更新了我的答案,所以你至少可以看到如何让它运行。
  • 我已经发布了另一个关于在 .ts 中转换消息的更一般问题的答案。文件在这里-stackoverflow.com/questions/48327401/…。我让它完全运行以翻译多种语言,并与 xliffmerge 集成以自动合并和翻译 i18n 消息。另一个答案提供了所有细节。
【解决方案2】:

鉴于官方指示“translating-plural-and-select-expressions”,你不能这样做吗? :

<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-02-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多