ngx-translate を使用して Angular で i18n をセットアップするためのガイド
国際化 (i18n) は、現代の Web 開発の重要な側面です。 これにより、開発者はさまざまな言語や地域に簡単に翻訳およびローカライズできるアプリケーションを作成できます。 最も人気のある JavaScript フレームワークの 18 つである Angular は、i18n の組み込みサポートを提供します。 このガイドでは、ngx-translate ライブラリを使用して Angular で iXNUMXn をセットアップする方法を説明します。
ngx翻訳とは何ですか?
ngx-translate は、Angular アプリケーション用の強力な国際化ライブラリです。 これは、アプリケーションで翻訳を処理するためのシンプルかつ柔軟な方法を提供します。 ngx-translate を使用すると、異なる言語を簡単に切り替えて、翻訳を効率的に管理できます。
ngx-translate のセットアップ
ngx-translate を使い始めるには、まずライブラリをインストールする必要があります。 ターミナルを開き、Angular プロジェクト ディレクトリに移動します。 次のコマンドを実行して ngx-translate をインストールします。
「 `
npm install @ngx-translate/core –save
「 `
インストールが完了したら、必要なモジュールを Angular アプリケーションにインポートできます。 `app.module.ts` ファイルを開き、次のインポートを追加します。
「」タイプスクリプト
import { TranslateModule, TranslateLoader } から '@ngx-translate/core';
import { TranslateHttpLoader } から '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } から '@angular/common/http';
「 `
次に、翻訳ローダーを構成する必要があります。 `@NgModule` デコレータの外側に `createTranslateLoader` という新しい関数を作成します。
「」タイプスクリプト
エクスポート関数 createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
「 `
この関数は、ngx-translate に翻訳ファイルの場所を指示します。 デフォルトでは、「./assets/i18n/」ディレクトリで JSON ファイルを検索します。
ここで、「@NgModule」デコレータ内に次のコードを追加して、必要なモジュールをインポートし、ngx-translate を設定します。
「」タイプスクリプト
@NgModule({
輸入品: [
//…
HTTPクライアントモジュール、
TranslateModule.forRoot({
ローダー: {
提供: TranslateLoader、
useFactory: createTranslateLoader、
deps: [HTTPクライアント]
}
})
],
//…
})
「 `
これらの構成が完了すると、Angular アプリケーションで ngx-translate を使用できるようになります。
翻訳にngx-translateを使用する
翻訳に ngx-translate を使用するには、コンポーネントに `TranslateService` をインポートする必要があります。 翻訳を使用するコンポーネント ファイルを開き、次のインポートを追加します。
「」タイプスクリプト
import { TranslateService } から '@ngx-translate/core';
「 `
次に、コンポーネントのコンストラクターに `TranslateService` を挿入します。
「」タイプスクリプト
コンストラクター(プライベート翻訳: TranslateService) { }
「 `
これで、「TranslateService」を使用して翻訳をロードし、言語を切り替えることができます。 たとえば、特定の言語の翻訳をロードするには、「use」メソッドを使用できます。
「」タイプスクリプト
this.translate.use('en');
「 `
このコードは英語の翻訳を読み込みます。 「en」を選択した言語コードに置き換えることができます。
テンプレートに翻訳されたテキストを表示するには、ngx-translate が提供する `translate` パイプを使用できます。 例えば：
「`html
{{ ‘welcomeMessage’ | translate }}
「 `
この例では、「welcomeMessage」が変換キーです。 ngx-translate は、このキーに対応する翻訳を検索し、テンプレートに表示します。
まとめ
ngx-translate を使用して Angular で i18n をセットアップするのは簡単なプロセスです。 このガイドで概説されている手順に従うことで、Angular アプリケーションで ngx-translate を簡単に構成し、翻訳の効率的な管理を開始できます。 ngx-translate を使用すると、さまざまな地域や言語のユーザーに対応する多言語アプリケーションを作成できます。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 自動車/EV、 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- ブロックオフセット。 環境オフセット所有権の近代化。 こちらからアクセスしてください。
- 情報源： プラトンデータインテリジェンス。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 自動車/EV、 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- ブロックオフセット。 環境オフセット所有権の近代化。 こちらからアクセスしてください。
- 情報源： https://platodata.network/platowire/a-guide-to-setting-up-i18n-in-angular-with-ngx-translate-codementor/
