web-dev-qa-db-ja.com

Angular 6-i18n vs. ngx-translate

私はangular 6.を使用して大規模なプロジェクトに取り組んでいます。このプロジェクトには重要な国際化の統合が必要です。続行する方法について適切な決定をしようとしています。

私が見る方法は、次のいずれかを選択できることです。

  1. ngx-translate（ https://github.com/ngx-translate/core ）
  2. 角度i18n（ https://angular.io/guide/i18n ）

私はオプション2を選択することに傾いています。 Angularのi18n。これは、Angular独自のビルトインパッケージであり、私にぴったりだからです。どうやらそれはSEOにとっても優れており、回避策なしのパフォーマンスにとってはわずかに優れています。また、現在リリースされているので、ngx-translateは非推奨になる可能性があります。ここにたくさんの情報があります： Angular 5国際化 。

ただし、私の予約は次のとおりです。

  • どうやらAngularのバージョンは非常に新しく/まだ追いついています（ https://github.com/ngx-translate/core/issues/495 ）。それはあまりにも新しいですか？
  • どうやら私は言語ごとに個別のウェブサイトを構築する必要があります（ https://angular.io/guide/i18n#template-translations ）???私はそれが良いことだとは本当に思わない。そうですか？または、テンプレートファイルが毎回動的に挿入される場合ですか？ ngx-translateを使用すると、翻訳された単語が.jsonファイルに保存されるだけであることがわかります。さまざまなWebサイトのビルドが必要だとは思わない。

angular i18n？でライブ言語切り替えを行う方法はありますか？つまり、サーバーからデータを再読み込み/再取得せずにページの言語を切り替えますか？それはJITと呼ばれるものですか？

誰も試しましたか https://github.com/robisim74/angular-l10n ？とてもよさそうです。

どうもありがとう。宜しくお願いします。

angularangular-i18n
23
Joey Gough

それはあまりにも新しいですか？

これは意見に基づいているため、トピックから外れています

どうやら私は別のウェブサイトを持っている必要があります

別のアプリケーション（つまり、index.html +バンドル）が必要です。ただし、これらのすべてのアプリケーションを単一のURLから提供し、サーバーで提供するアプリケーションを決定することができます。 Ivyの上に構築された新しい動的i18nが利用可能になると、（願わくば）Angular 7で変更されます。

テンプレートファイルが毎回動的に挿入される場合ですか？

よく分からない。ビルドするロケールの翻訳は、Angular AOTコンパイラーによって、コンパイル時に生成されたテンプレートクラスに保存されます。

angular i18nでライブ言語切り替えを行う方法はありますか？

いいえ、それはi18nの次のバージョンでも不可能です。同じ独自のアプリケーションを複数の言語で実行できますが、起動時に言語を選択する必要があり、別の言語を選択するにはアプリを再起動する必要があります。

angular i18nでライブ言語切り替えを行う方法はありますか？

いいえ。少なくとも効率的ではありません。

それがJITと呼ばれるものですか？

いいえ。JITコンパイラは、ブラウザの起動時にHTMLテンプレートをJavaScriptにコンパイルします。本番環境では、AOTコンパイラ（生成されたJSクラスへの翻訳の統合にも使用されます）を使用します。これは、テンプレートの同様のコンパイルを行いますが、実行時ではなくビルド時に行われます。

18
JB Nizet

議論はまだ続いており、ここで、Angular開発者から直接でも：いくつかの答えと意見を見つけることができます： https://github.com/ngx-translate/core/ issues/495

個人的には、公式i18nでアプリを構築し、最終的にngx-translateライブラリを使用してコードに専用の翻訳を追加します。

angular i18nでライブ言語切り替えを行う方法はありますか？

実はあります。アプリの異なるdistをビルドする必要がありますが、フルデプロイ後にライブに切り替えることができます。

Official Angluar docs および 推奨チュートリアル

4
sgabb

開発者が国際化の面倒を見るためにライブラリのようなngx-translateを好む理由は理解できます。結局のところ、翻訳の問題を1v1マッピングにすることで、私たちの生活はとても簡単になります。残念ながら、これは人間の言語では機能しません。このアプローチの欠点をよりよく理解するために、2つ以上の言語を知っている人がいます。

簡単な例を次に示します。旅費のアプリがあるとします。1つの列のタイトルが経費が報告された時間を示す「時間」である表形式のビューがあるとします。次に、このようなアプリで、費用の基本的な確認を行うミニ計算機があり、「倍数」と呼ばれるレイオーバー付きの乗算ボタンxがあることを想像してください。 ngx-translateを実行するときは、同じキー「TIMES」を使用して両方を抽出し、翻訳者が1つの翻訳を返します。しかし、「時間」の最初の出現は、他のすべての言語で2番目の出現と同じように翻訳されるとは限りません。スペイン語を例にとります：

  • 「電卓のように」「2回3回」->「dos POR tres」
  • 「経費」（表形式のように）->「TIEMPOS de gasto」

これが実際に、国際化が意味をサポートするためにXLFなどのより洗練された形式を使用する方向に移行している理由です。Angularの場合は説明ではなく、コンテキストに関する翻訳に対応できない古い1深さのJSONスタイル。

今、あなたはこれが英語では同じものにマップする「時間」の2つの異なるキーを登録することによって解決可能であると主張するかもしれませんが、それは開発者としてあなたのアプリが開発中にサポートするすべての言語を知っている必要があります顧客からのフィードバックを取得し、別のキーを追加するという別の反復処理を行います（メッセージ（テキスト）の説明と意味を提供する場合、翻訳者は他の知識がなくてもそれを処理します）言語（スペイン語を知っている場合は、英語では同じですがスペイン語ではない仮定法と動詞の指示形でこれがどれほど複雑になるか考えてください）。

他の質問に答えるには、「angular i18n？でライブ言語切り替えを行う方法はありますか？」：はい、あります。状態について この素晴らしい記事 をご覧ください。アプリでの管理：クライアントと永続状態をURLに反映させる必要があるのは簡単ですが、パスにロケールプレフィックスを追加するだけで、Webサーバーが適切なロケールビルドを提供します。ロケール変更アクションが発生する前のアプリの状態は、URLから回復可能です（「永続状態とクライアント状態の両方を反映する」ため）。

2
Wildhammer

Angular I18Nの大きな利点の1つは、テンプレートへの影響が最小限であることです。ローカライズする各要素にi18n属性を追加するだけです。

<p>Hello World<p>

になる

<p i18n>Hello World<p>

マークアップを大きく変更する必要はなく、リソースファイルを手動で管理する必要もありません。 AngularまたはReactに他のI18Nライブラリを使用する場合、次のようにマークアップを変更する必要があります。

<p>Translate("Hello World")<p>

また、次のようなニュートラルリソースファイルに文字列を手動で追加する必要があります

"Hello World": "Hello World"

次に、文字列を変更する場合は、リソースファイルのキーと値も更新する必要があります。

Angular I18Nを使用すると、抽出ツールを使用してニュートラルリソースファイルを作成および管理できます。

Angular I18Nで現在欠落しているのは、ソースコードで文字列をローカライズする機能です。ただし、この機能は間もなく登場します。

1
Jaska