Posted at

Angular2でi18n対応してみる

More than 3 years have passed since last update.

angular2のCHANGELOGを見ているとi18nについても実装が進んでいるようですが、今時点(2016年5月1日12:00現在)では具体的な使い方を示すドキュメントがまだ提供されておらず、使い方が分かりません。(そもそもまだ使えないのかもしれませんが)

そこで、ng2-translateを使ってi18n対応をサクッとしてみたいと思います。


本記事のangular2のversion

2.0.0-beta.17


ng2-translateのインストール

angular2のプロジェクトディレクトリで npm install します。

npm install ng2-translate --save


元となるComponent

下記のようなComponentにi18n対応をしてみます。ただ画面に Hello, world! と表示するだけのコンポーネントです。この表示を英語/日本語に切り替えられるようにしてみたいと思います。


home.component.ts

import {Component} from 'angular2/core';

@Component({
selector: 'home',
template: `
<div>Hello, world!</div>
`

})
export class Home {}



ng2-translateの利用の流れ

ng2-translateの利用は、下記の流れで行います。


  1. 辞書ファイルの作成

  2. templateへのtranslate pipeの適用

  3. 使用する言語の指定

順番に見ていきましょう。


1. 辞書ファイルの作成

今回は英語と日本語に対応するので、それぞれの辞書ファイル(json形式)を作成します。jsonのキー値は、Componentのtranslate pipeを使用するときのIDです。


en.json

{

"HELLO": "Hello, {{value}}!"
}


ja.json

{

"HELLO": "{{value}}さん、こんにちは!"
}


2. templateへのtranslate pipeの適用

最初のHomeコンポーネントにtranslate pipeを適用してみましょう。 TranslatePipe をimportし、同時に TranslateService を使用するため TRANSLATE_PROVIDERS, TranslateService もimportします。また、 TRANSLATE_PROVIDERS をコンポーネントの providers に忘れずに記述します。


home.component.ts

import {Component} from 'angular2/core';

import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

@Component({
selector: 'home',
template: `
<div>{{ 'HELLO' | translate:{value: 'world'} }}</div>
`
,
providers: [TRANSLATE_PROVIDERS],
pipes: [TranslatePipe]
})
export class Home {}



3. 使用する言語の指定

下記のようにHomeコンポーネントの内部で言語を指定すれば、その言語で描画することが可能です。


home.component.ts

import {Component} from 'angular2/core';

import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

@Component({
selector: 'home',
template: `
<div>{{ 'HELLO' | translate:{value: 'world'} }}</div>
`
,
providers: [TRANSLATE_PROVIDERS],
pipes: [TranslatePipe]
})
export class Home {
constructor(private translate: TranslateService) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}


日本語を表示したい場合には、 'ja'を指定すればOKです。


ブラウザの設定言語で表示

ブラウザの設定言語で表示したい場合には、navigatorのlanguageを参照します。下記の例では、ユーザの設定が英語でも日本語でもない場合には、デフォルトで英語が使用されることになります。


home.component.ts【クラス定義のみ抜粋】

export class Home {

constructor(private translate: TranslateService) {
let userLang = navigator.language.split('-')[0];
let lang = /(en|ja)/gi.test(userLang) ? userLang : 'en';
this.translate.setDefaultLang(lang);
this.translate.use(lang);
}
}



任意の言語切替

ユーザが任意で言語を切り替えられるよう、selectorを作成し、changeイベントに従って変えられるよにしてみます。


home.component.ts

import {Component} from 'angular2/core';

import {TRANSLATE_PROVIDERS, TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';

@Component({
selector: 'home',
template: `
<select (change)="onLangChange(sel.value)" ref-sel>
<option *ngFor="let lang of langList" value="{{ lang.code }}">
{{ lang.name }}
</option>
</select>
<div>{{ 'HELLO' | translate:{value: 'world'} }}</div>
`
,
providers: [TRANSLATE_PROVIDERS],
pipes: [TranslatePipe]
})
export class Home {
langList = [
{
code: 'en-us',
name: 'English'
},
{
code: 'ja-jp',
name: '日本語'
}
];

constructor(private translate: TranslateService) {
let userLang = navigator.language.split('-')[0];
let lang = /(en|ja)/gi.test(userLang) ? userLang : 'en';
this.translate.setDefaultLang(lang);
this.translate.use(lang);
}

onLangChange(langCode: string) {
let userLang = langCode.split('-')[0];
let lang = /(en|ja)/gi.test(userLang) ? userLang : 'en';
this.translate.setDefaultLang(lang);
this.translate.use(lang);
}
}


これによって、下記のように切り替えることが可能です。

英語表示

日本語表示

※余談ですが、上記コードはbeta.17から導入された reflet を使用しています。詳しくは、こちら(Beta.16とBeta.17の変更点)をご覧ください。


まとめ

ng2-translateを使って非常に簡単にangular2でのi18n対応することが出来ました。公式のi18nサポートも気になるところですので、引き続きwatchしていきたいと思います。