代码之家  ›  专栏  ›  技术社区  ›  tatsu

角-I18N角6国际化:如何处理变量

angular-i18n angular
  •  6
  • tatsu  · 技术社区  · 8 年前

    我在这里读了整个文件: 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 --configuration=fr 工作

    你必须编辑 angular.json 此外,官方文件中没有具体说明,但他们确实在这里讨论过: https://github.com/angular/angular-cli/wiki/stories-internationalization

    我加了一个 <target>Title</target> 当然,这意味着现在VaR的每个值都会返回“标题”,不管是什么。

    同样在放置 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的消息?

    2 回复  |  直到 8 年前
        1
  •  10
  •   Chris Halcrow    8 年前

    这种填充物似乎是目前最好的方式-它主要由负责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编译 ,对于角5(也适用于角6)。以下是翻译成一种语言所需要做的事情(这是一种很好的工作方式,您可以在以后使用多种语言):

    关于使用AOT编译的说明:如果使用AOT编译 翻译模板, .ts文件中消息的翻译 仍将在运行时使用JIT编译完成 (这就是为什么你 需要参考 TRANSLATIONS 和 TRANSLATIONS_FORMAT 而不是仅仅 在构建脚本中注册它们)。

    应用模块.ts

    将以下导入添加到根角度模块: 

    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",

    此polyfill的当前状态:

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

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

    关于在即将到来的Angular6小版本中对代码中变量/字符串的翻译的支持,已经有过一些讨论。

    以下是Olivier Combe(今年3月)对Github的以下讨论的引述:

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

    运行时i18n的第一个pr已与master合并 一个Hello World演示应用程序,我们将使用它来测试这些功能。它起作用了 在运行时,支持理论上的代码翻译,即使有 还没有服务。目前,它的支持非常少(静态 字符串),我们正在努力添加新功能(我将使 下周提取工作,然后使用占位符动态字符串 和变量)。之后,我们将为代码翻译服务。 一旦一个新功能完成,它就被合并到master中,您 不用等新的专业了。

        2
  •  0
  •   user1767316    8 年前

    给出官方指示” translating-plural-and-select-expressions “,你不能吗?以下内容: 

    <div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号