web-dev-qa-db-ja.com

angle-i18n Angular 6国際化：変数の扱い方

ここでドキュメント全体を読みました： 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>

変数の複数の可能性を処理するためにこのようなことをする必要がありますか？

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

ならどうしよう？ドロップゾーンに渡されたメッセージをどのように翻訳しますか？

angularangular-i18n
8
tatsu

このポリフィルは、現時点で最適な方法のようです。主にi18nを担当するAngularチームのメンバーであるOlivier Combeによって書かれています。

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

Angular 5の場合、インストール時にバージョン0.2.0が必要です。

npm install @ngx-translate/[email protected] --save

Angular 6の場合、最新バージョンを取得します-現在1.0.0：

npm install @ngx-translate/[email protected] --save

ポリフィルが動作するようになりましたJITとAOTの両方のコンパイル用、Angular 5の場合（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-extractorツールを使用してこれを行うことができます。 polyfillページ のreadmeを参照してください。

これらはすべて xliffmerge と互換性があり、既存の翻訳を上書きせずに、追加したnewの翻訳を自動的にマージするための優れたツールです。 Xliffmergeは、Google翻訳を使用して自動的に翻訳を実行することもできます（Google翻訳APIキーが必要です）。これが機能するために、次の順序で抽出とマージ/翻訳を行います。before実際の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ファイル内の変数または文字列を変換するための「投機的な」ポリフィルです。 Angularに組み込まれたAPIに置き換えられる可能性がありますが、これは非常によく似ているため、後でアップグレードすることは合理的に管理できるはずです。 Githubページの免責事項は次のとおりです。

このライブラリは投機的なポリフィルであり、将来登場するAPIを置き換えることになっています。 APIが異なる場合、可能かつ必要であれば移行ツールが提供されます。

コード内の変数/文字列の翻訳のためのAngular 6の今後のマイナーバージョンでのサポートに関するいくつかの議論がありました。

以下は、Githubに関する以下の議論からのOlivier Combe（今年3月から）からの引用です。

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

ランタイムi18nの最初のPRは、機能のテストに使用するhello worldデモアプリと共に、masterにマージされました。実行時に機能し、まだサービスが提供されていない場合でも、理論的にはコード変換をサポートします。現在のところ、非常に最小限のサポート（静的文字列）であり、新しい機能の追加に取り組んでいます（来週は抽出を実行し、プレースホルダーと変数を含む動的文字列を作成します）。その後、コード変換のサービスを行います。新機能が完成するとすぐにマスターにマージされ、新しいメジャーを待つ必要はありません。

10
Chris Halcrow

公式の指示「 translating-plural-and-select-expressions 」が与えられたら、できませんか？ ：

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