Angular2のi18nを使ってみた

3956 ワード
Angular2 I18n I18n テキストリンク

ざっくり3行

  • 「Internationalization (i18n)」をななめ読みし
  • Angular CLIでサクッと
  • 日本語翻訳したプロジェクトを動かす

プロジェクトの作成

$ ng new angular2-i18n
$ cd angular2-i18n

ツールのインストール

$ npm install @angular/compiler-cli @angular/platform-server --save
package.json
"scripts": {
  "i18n": "ng-xi18n"
}

翻訳元となるHTMLファイルに手をくわえる

i18n属性を加えた箇所が翻訳対象となります。
また@@から始まるIDを予め振っておくと管理しやすくなると思います。（指定しない場合、辞書ファイル生成時に自動でIDが振られます）

app.component.html
<h1>
  {{title}}
</h1>

↓

app.component.html
<h1 i18n="@@hello">
  Hello world
</h1>

辞書ファイルの作成

$ npm run i18n -- --i18nFormat=xlf  --outFile=src/locale/messages.ja.xlf

辞書ファイルの修正

HTML側に振ったIDを持つ要素のtargetに和訳を入れていきます。

messages.ja.xlf
<trans-unit id="hello" datatype="html">
  <source>
    Hello world
  </source>
  <target/>
  ...
</trans-unit>
...

↓

messages.ja.xlf
<trans-unit id="hello" datatype="html">
  <source>
    Hello world
  </source>
  <target>
    こんにちは世界
  </target>
  ...
</trans-unit>
...

起動

$ ng serve --aot --locale ja --i18n-format xlf --i18n-file src/locale/messages.ja.xlf