Ngxの使用方法-Angularで翻訳する

序章

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

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

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

前提条件

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

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• Angularプロジェクトのセットアップにある程度精通している。

このチュートリアルは、ノード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を使用して新しいプロジェクトを作成します。

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

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

cd angular-ngx-translate-example

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

npm install @ngx-translate/core@13.0.0

次に、TranslateModuleをAppModuleにインポートします。

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を介して読み込むことです。

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

次に、TranslateHttpLoaderをAppModuleにインポートします。

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ルート、またはその他のメソッドを介して、TranslateServiceのuse(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サポートについて読んで学習を続けてください。