web-dev-qa-db-ja.com

この時点でAngular2 i18n？

試してみることにし、Angular2を使用した新しいプロジェクトを開始しました。これまでのところは良いですが、この時点で問題に直面しています。この時点で、Angular2のi18nへの適切なアプローチは何ですか？私たちは少し調べて、これを見つけました：

ただし、最後のコミットは5か月以上前です...活発な開発のようには見えません。

誰もangular-translateまたはangular-gettextを使用しようとしましたか？それとも、Angular2でi18nextのようなJSをラップする方が良いでしょうか誰もが自分の考えを共有できますか？たぶん同じ問題に直面したのでしょうか？

internationalizationangular
42
Adam Nowaczyk

PlunkはAngular 2Finalに更新されました： https://plnkr.co/edit/4euRQQ 。 RC7と同じように動作するようです。

新しい i18n セクションがAngular 2つの公式ドキュメントに追加されました。基本的に、上記のplunkrで何が起こるかを詳細に説明します。

XLIFF は翻訳の唯一の形式であり、jsonサポートはありません。翻訳ソースファイル（xliff、xlf）は ng-xi18n ツールを使用して作成する必要があります。

package.json：

"scripts": {
  "i18n": "ng-xi18n", 
  ...
}

そして

npm run i18n

翻訳をコンポーネントテンプレートにマージする方法の詳細については、 Merge translation セクションを参照してください。 SystemJS Textプラグインを使用して完了しました。

Gulpを使用した別の例 http://www.savethecode.com/angular2-i18n-native-support/

古いスタッフ：RC7およびハーマン・フランセン：

最小限のPlunkrの例を作成しました： https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM

Plunkrへのコメント：

  • bootstrapは、TRANSLATIONS、TRANSLATIONS_FORMAT、LOCALE_IDに値を指定する必要があります->翻訳のセットアップ
  • htmlテンプレートの翻訳可能なアイテムは、ディレクティブi18nを使用する必要があります
  • 翻訳は.xlfファイルに保存されます。言語間の関連付けは_​​Idを介して行われ、htmlとxlfの<source>タグの値によって関連付けられます
  • 現在、xlfファイルは直接使用されていません。 .tsファイルは、xlfの内容をエクスポート可能な変数にラップするために手動で作成されます。これは最終リリースで自動的に機能するはずです（おそらく今でも）。

これは、私が見つけた公式に文書化された最初のアプローチです。ただし、まだほとんど使用できません。現在の実装には次の問題があります。

  • 言語はbootstrapに設定されており、実行時に変更できません。これはFinalで変更する必要があります。
  • xlfの翻訳可能なアイテムのIDはSHAを生成します。このIDを取得する現在の方法は少し面倒です。新しい翻訳可能なアイテムを作成し、それを使用して、エラーからSHA idをコピーし、i18n.lang.xlfファイルに貼り付けます。

大きなドキュメントがあります pull request i18nについて

旧スタッフ：リリースノート https://github.com/angular/angular/blob/master/CHANGELOG.md have記録

i18n：翻訳のマージ 7a8ef1e

i18nの大きなチャンクがAngular 2 RC5に導入されました

残念ながら、まだ利用可能なドキュメントはありません。

19
Andrei Zhytkevich

誰もが公式の実装に熱心ですが、これは私のユースケースで機能しました： https://github.com/ocombe/ng2-translate

READMEはかなり徹底的で、何か特別なものが必要な場合（私にとってはコード分割でした）、コード自体は長すぎず、読みにくいものでもありません。

16
Samjones

I18nのサポートがAngular 2 RC6で公式になりました

公式リリースのブログ：
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

Angular 2 RC6を使用した国際化のサンプル
https://github.com/StephenFluin/i18n-sample

Angle2でi18nの新しいコンセプトがどのように機能するかについての詳細情報：
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

8
Herman Fransen

pipeとserviceを使用してこれを実装する別の方法を見つけました

HTML

<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>

TypeScript

...

// "this.translate" is our translate service
this.translate.use('es'); // use spanish

...

// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); 

...

https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1https://scotch.io/tutorials/simple-language- translation-in-angular-2-part-2

3
vinboxx

Angular.ioにはi18nの公式サポートがあります：

https://angular.io/docs/ts/latest/cookbook/i18n.html

しかし！ドキュメントで述べたように：

サポートされている言語ごとに、アプリケーションの個別のバージョンをビルドおよびデプロイする必要があります！

ほとんどの場合、この機能は役に立たなくなります...

ここで説明されているように、CLIなしで使用する場合を除きます。

https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

3
trojan

私はPOCをまとめていますが、公式文書は控えめに言っても面倒なので、ngx-translate http://www.ngx-translate.com/ を試し、文字通りhello worldを機能させました数分で、いくつかの注意事項があります。

  1. 私はパイプのためにパフォーマンスについて不平を言っている人々を読んだことがありますが、githubの問題を読んで、それは解決されているようです
  2. それはi18nまたはローカリゼーションのみに対応し、i10nまたはローカリゼーションには対応していません
  3. Angular4では警告エラーはほとんどありませんが、とにかく動作します

長い話short小さいアプリがあり、翻訳のみが必要な場合、ngx-translateが気に入った

私は個人的にローカライゼーションを望んでいたので、私は https://github.com/robisim74/angular-l10n を見ています。かなり良いように見えますが、私はテストしていませんので、後でお知らせします。

0
Sebastian Castaldi