ngx-translateの使い方

Angularアプリで国際化(i18n)を行う際、ngx-translateを使用すれば簡単に国際化が可能です

目次

インストール

npmでインストールします
必要なパッケージは@ngx-translate/coreと@ngx-translate/http-loaderです

npm install @ngx-translate/core @ngx-translate/http-loader --save

使い方

app.module.tsの変更

app.module.tsのimportsに追加します
併せてHttpClientを使用しますのでHttpClientModuleも必要となります

TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    },
    defaultLanguage: 'ja'
})

HttpLoaderFactoryメソッドをapp.module.tsに追加します

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

全体としては以下のようになります

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            },
            defaultLanguage: 'ja'
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

言語ファイルの作成

言語ファイルはasset/i18n/に各言語ごとに作成します
例えば日本語の場合はasset/i18n/ja.json、英語の場合はasset/i18n/en.jsonとなります
中身は下記のようにjsonで記述します

{
    "message": "メッセージです"
    "login": {
        "id": "ユーザーID",
        "password": "パスワード"
    }
}
{
    "message": "this is message."
    "login": {
        "id": "user id",
        "password": "password"
    }
}

コンポーネントでの使い方

言語切り替えなどはコンポーネントにDIされるTranslateServiceを使用します
下記例ではコンストラクタで英語(en)を使用するように言語を変更しています

constructor(translate: TranslateService) {
    translate.use('en');
}

テンプレートでの使い方

テンプレートで文字列を表示する際はtranslateを使用します
パイプ、ディレクティブどちらでも使用可能です
下記例では日本語ではメッセージです、英語ではthis is message.と表示されます

<p [translate]="'message'"></p>
<p translate>message</p> <!-- タグの中身をキーとすることができる -->
<p>{{'message' | translate}}</p>

translateに指定する文字列は言語ファイルのjsonのキーです
javascriptのojbectのようにlogin.idなど子要素を持つことが可能です

<p [translate]="'login.id'"></p>
<p translate>login.id</p>
<p>{{'login.id' | translate}}</p>

簡潔に記述できるのは<p translate>message</p>の形式です
注意点としてディレクティブは<ng-container>には使用できません

<!-- この使用方法はできません -->
<ng-container [translate]="'login.login'"></ng-container>
<ng-container translate>login.login</ng-container>

<ng-container>で使用する際はパイプで使用します

<ng-container>{{'login.login' | translate}}</ng-container>

ブラウザの言語設定を取得する方法

TranslateServiceを使用するとブラウザの言語設定を取得することができます
ブラウザの言語設定に従い表示する言語を切り替えるような使い方ができます

public constructor(public translate: TranslateService) {
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang);
}

参考

よかったらシェアしてね!
目次
閉じる