文章/答案/技术大牛

发布

社区首页 >问答首页 >angular-i18n Angular 6国际化:如何处理变量

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

Stack Overflow用户

提问于 2018-06-13 22:24:47

回答 2查看 19K关注 0票数 11

我已经在这里阅读了整个文档：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服务接受新的配置。

再次更新：

要让ng serve --configuration=fr工作，请执行以下操作

你必须进一步编辑angular.json，官方文档中没有指定，但他们在这里讨论了它：https://github.com/angular/angular-cli/wiki/stories-internationalization

好吧，我添加了一个标题，它可以工作，但当然这意味着现在每个<target>Title</target>的值都会返回"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-i18n

angular

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-18 13:27:39

这个polyfill似乎是现在最好的方式--它主要是由Olivier Combe编写的，他是负责i18n的Angular团队的成员：

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在Angular 5的JIT和AOT编译中工作(它也可以在Angular 6中工作)。下面是翻译成一种语言需要做的事情(这是一个很好的工作方式--以后你可以让多语言工作)：

关于使用AOT编译的注意事项:如果您使用AOT编译来转换模板，.ts文件中的消息转换仍将在运行时使用JIT编译完成(这就是为什么您需要引用TRANSLATIONS和TRANSLATIONS_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-提取器工具来执行此操作。请参阅polyfill page上的自述文件。

所有这些都与xliffmerge兼容，这是一个很好的工具，可以自动合并您添加的任何新翻译，而不会覆盖现有的翻译。Xliffmerge还可以使用Google translate自动执行翻译(您需要一个Google translate 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",

此多层填充的当前状态：

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

API这个库是一个推测性的polyfill，这意味着它应该取代未来的

。如果API不同，在可能和必要的情况下，会提供迁移工具。

在即将到来的Angular 6的次要版本中，对代码中变量/字符串的翻译的支持已经有了一些讨论。

以下是Olivier Combe (来自今年3月)的一段话，来自Github上的以下讨论：

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

运行时i18n的第一个PR已经合并到master中，以及一个hello world演示应用程序，我们将使用它来测试功能。它在运行时工作，理论上支持代码翻译，即使还没有为它提供服务。现在它是最小的支持(静态字符串)，我们正在努力添加新的功能(我将在下周开始提取，然后使用占位符和变量的动态字符串)。在此之后，我们将提供代码翻译服务。一旦新功能完成，它就会合并到master中，您不必等待新的主要功能。

票数 10

Stack Overflow用户

发布于 2018-10-14 12:14:56

考虑到官方指令"translating-plural-and-select-expressions"，你不能这样做吗？：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50839676

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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