个人中心
gpt4 book ai didi

angular-i18n Angular 6 国际化 : How to deal with variables

转载 作者：太空狗 更新时间：2023-10-29 17:13:41 26 4
gpt4 key购买 nike

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

好吧，我添加了一个 <target>Title</target>它有效，但当然这意味着现在 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 的消息？

最佳答案

这个 polyfill 似乎是目前最好的方式 - 它主要由负责国际化的 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

我得到了适用于 Angular 5 的 polyfill JIT 和 AOT 编译(它也适用于 Angular 6)。以下是翻译成一种语言所需执行的操作(这是实现此目的的好方法 - 稍后您可以翻译成多种语言):

Note on using AOT compilation: If you're using AOT compilation to translate your templates, translation of the messages in .ts files will still be done at runtime using JIT compilation (that's why you need to reference TRANSLATIONS and TRANSLATIONS_FORMAT instead of just registering them in your build scripts).

应用程序模块.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 还可以使用谷歌翻译自动执行翻译(您需要谷歌翻译 API key )。为此，我按以下顺序进行提取和合并/翻译，在我进行实际的 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的当前状态:

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

This library is a speculative polyfill, it means that it's supposed to replace an API that is coming in the future. If the API is different, a migration tool will be provided if it's possible and necessary.

关于在即将推出的 Angular 6 次要版本中对代码中变量/字符串的翻译的支持存在一些讨论。

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

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

The first PR for runtime i18n has been merged into master, along with a hello world demo app that we will use to test the features. It works at runtime, and support theoretically code translations, even if there is no service for it yet. For now it's very minimal support (static strings), we're working on adding new features (I'll make the extraction work next week, and then dynamic string with placeholders and variables). After that we'll do the service for code translations. As soon as a new feature is finished it gets merged into master, you won't have to wait for a new major.

关于angular-i18n Angular 6 国际化 : How to deal with variables，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50839676/

26 4 0
文章推荐： python - 为什么不能在子类的 __init__ 中传递 *args 和 **kwargs
文章推荐： c - 使 R 在转义终端时使用 C 表示法
文章推荐： c - malloc 上的 sigsegv 错误让我抓狂
文章推荐： python - Matplotlib imshow/matshow 在图上显示值
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com