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

序章

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

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

この記事では、 ngx-translate Angularアプリケーションで。

前提条件

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

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

このチュートリアルは、Nodev16.4.0で検証されました。 npm v7.19.0、 @angular/core v12.1.0、 @ngx-translate/core v13.0.0、および @ngx-translate/http-loader v6.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:

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

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

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

次に、 TranslateHttpLoader あなたの中で AppModule:

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オブジェクトであり、キーは翻訳されるテキストを記述し、値はファイルで指定された言語の実際のテキストです。

{
  "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",
  "login": {
    "username": "Enter your user name",
    "password": "Password here"
  }
}

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

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

翻訳へのアクセス

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

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

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 最初は。

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ルート、またはその他のメソッドを介して、 use(lang: string) 上のメソッド TranslateService 現在の言語を設定します。

使用する TranslatePipe

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

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

<p>{{ 'welcomeMessage' | translate: user }}</p>

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

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

<input type="password" placeholder="{{ 'login.password' | translate }}">

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

使用する TranslateDirective

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

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

<label translate='login.username'></label>

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

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

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

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

結論

この記事では、 ngx-translate Angularアプリケーションで。

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