序章

ある時点で、Webアプリケーションは多言語のユーザーベースにサービスを提供する必要があるかもしれません。 Internationalization 、または略して i18n は、異なる母国語を使用するユーザーがアプリを使用できるようにするプロセスです。

Angularにはいくつかの組み込みi18n機能がありますが、 ngx-translate は、ユースケースにより適している可能性のあるいくつかの機能を提供するサードパーティパッケージです。

この記事では、Angularアプリケーションでngx-translateを使用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、ノードv16.4.0、npm v7.19.0、@angular/core v12.1.0、@ngx-translate/core v13.0.0、および@ngx-translate/http-loaderv6.0.0で検証されました。 。

プロジェクトの設定

まったく新しいAngularアプリケーションを作成し、いくつかの依存関係を追加します。

ターミナルを開き、@angular/cliを使用して新しいプロジェクトを作成します。

  1. ng new angular-ngx-translate-example --skip-tests

次に、新しく作成されたプロジェクトディレクトリに移動します。

  1. cd angular-ngx-translate-example

次に、次のコマンドを実行して、パッケージをアプリケーションに追加します。

  1. npm install @ngx-translate/core@13.0.0

次に、TranslateModuleAppModuleにインポートします。

src / app / app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TranslateModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これにより、変換サービス、パイプ、およびディレクティブのコアへのアクセスが提供されます。

ただし、コードを使用してすべての翻訳を手動で追加する予定がない限り、翻訳の読み込みを少し簡単にするために、この段階で少し構成を追加することをお勧めします。

TraslateHttpLoaderを使用する

おそらく、翻訳をロードする最も一般的な方法は、翻訳ファイルをアセットとして含め、別のnpmパッケージで利用可能なTranslateHttpLoaderを介してロードすることです。

  1. npm install @ngx-translate/http-loader@6.0.0

次に、TranslateHttpLoaderAppModuleにインポートします。

src / app / app.module.ts
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.component';

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

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

独自のローダーを自由に作成できます。 TranslateLoaderインターフェースを実装し、上記のようにモジュールに提供する必要があります。

翻訳ファイルの使用

この方法で翻訳ローダーを作成すると、プロジェクト内の/assets/i18n/フォルダーの下に{lang}.jsonというファイルが作成されます。ここで、{lang}は使用しているファイルの言語です。翻訳用。 英語の場合、このファイルは、たとえばen.jsonの場合があります。

new TranslateHttpLoader()コンストラクターに追加のパラメーターを指定することにより、デフォルトのパスとファイル拡張子を変更できます。

翻訳ファイルは、キーと値のペアのJSONオブジェクトであり、キーは翻訳されるテキストを記述し、値はファイルで指定された言語の実際のテキストです。

src / Assets / i18n / en.json
{
  "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
  "login": {
    "username": "Enter your user name",
    "password": "Password here"
  }
}

値は別のオブジェクトである場合もあります。これにより、必要に応じて翻訳をグループ化できます。

翻訳値のテキストでは、変数名の前後に二重中括弧を含めることもできます。これにより、後で文字列を動的に翻訳に補間できます。

翻訳へのアクセス

アプリケーションでこれらの変換にアクセスする前に、TranslateServiceのいくつかのプロパティを初期化する必要があります。

おそらくこれを行うのに最適な場所は、ブートストラップされたAppComponentです。

src / app / app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'klingon']);
    translate.setDefaultLang('en');
    translate.use('en');
  }
}

まず、translate.addLangs([])は、翻訳に使用できる言語をサービスに通知します。

メソッドtranslate.setDefaultLang('en')を使用すると、現在の言語の翻訳が欠落している場合に使用する翻訳のフォールバックセットを指定できます。

translate.use('en')は、翻訳に使用する現在の言語をサービスに通知します。

これらすべてのパラメーターは、翻訳を取得する言語です。これらは、これらの言語の翻訳を定義するJSONファイルの名前と一致する必要があります。

この設定では、翻訳にアクセスする方法が3つあります。 いつでもどちらを使用するかは、ニーズと好みに応じて異なります。

TranslateServiceを使用する

このサービスを使用して、翻訳を取得する方法は2つあります。

最初の、そして推奨される方法は、以下を使用することです。

get(key: string|Array<string>, interpolateParams?: Object)`

これはObservableを返すため、非同期であり、値を使用する前に変換ファイルがロードされることが保証されます。 このObservableは、値が取得されるとすぐに完了します。

2番目の方法は、次を使用することです。

instant(key: string|Array<string>, interpolateParams?: Object)`

これは同期です。 この方法を使用するときに翻訳ファイルの読み込みが完了していない場合、翻訳はまったく取得されません。

現在の言語としてenを使用するようにサービスに指示したため、すべての翻訳結果は最初はen.jsonから取得されます。

src / app / app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user!: { firstName: string; lastName: string; };
  welcome!: string;
  usernameLabel!: string;
  passwordLabel!: string;

  constructor(translate: TranslateService) {
    translate.addLangs(['en', 'klingon']);
    translate.setDefaultLang('en');
    translate.use('en');
  }

  ngOnInit() {
    // hardcoded example
    this.user = { firstName: 'Sammy', lastName: 'Shark' };

    // synchronous. Also interpolate the 'firstName' parameter with a value.
    this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });

    // asynchronous - gets translations then completes.
    this.translate.get(['login.username', 'login.password'])
      .subscribe(translations => {
        this.usernameLabel = translations['login.username'];
        this.passwordLabel = translations['login.password'];
      });
  }
}

アプリケーションに独自のメソッドを実装して、言語を切り替えることができます。選択ボックス、URLルート、またはその他のメソッドを介して、TranslateServiceuse(lang: string)メソッドを呼び出して、現在の言語を設定します。 。

TranslatePipeを使用する

Angularの他のパイプを使用するのと同じように、変換パイプを使用できます。 パイプへの入力は、必要な翻訳の鍵です。 オプションのパラメータは、変換が期待する補間文字列を定義するオブジェクトです。

以下の例では、コンポーネントにuserオブジェクトがあり、プロパティはfirstNameです。

src / app / app.component.html
<p>{{ 'welcomeMessage' | translate: user }}</p>

このコードは、"Thanks for joining, Sammy! It's great to have you!"のメッセージを生成します。

これは、welcomeMessageの値によって期待される補間と一致します。

src / app / app.component.html
<input type="password" placeholder="{{ 'login.password' | translate }}">

このコードは、プレースホルダーが"Password here"の入力を生成します。

TranslateDirectiveを使用する

また、任意のHTML要素にディレクティブを配置して翻訳を取得することもできます。

これを行うには、いくつかの異なる方法があります。

src / app / app.component.html
<label translate='login.username'></label>

このコードは、"Enter your user name"のラベルを生成します。

翻訳のキーを要素のコンテンツとして設定することもできます。

src / app / app.component.html
<p translate [translateParams]="{ firstName: user.firstName }">welcomeMessage</p>

このコードは、"Thanks for joining, Sammy! It's great to have you!"のメッセージを生成します。

結論

この記事では、Angularアプリケーションでngx-translateを使用しました。

Angular組み込みi18nサポートについて読んで学習を続けてください。