序章
ある時点で、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/[email protected]
次に、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/[email protected]
次に、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サポートについて読んで学習を続けてください。
