web-dev-qa-db-ja.com

Angular 6多言語サポートのためのCLIローカリゼーションと国際化

アプリケーションでAngular 6を使用しています。そのアプリケーションでは、多言語サポートを提供したいと考えています。

ローカリゼーションと国際化をangular 6で実装するにはどうすればよいですか？そのangular 6バージョン。

angulartypescriptlocalizationinternationalizationangular6
10
Dinesh Ghule

Translate Angular ngx-translateを使用した6つのアプリ：行うこと：

最小限のAngular6プロジェクトの作成ngx-translateのインストールとロードTranslateServiceの初期化.json翻訳ファイルの作成シンプルなタイトルとイントロの翻訳言語スイッチャーの統合変数で文を翻訳

ネストされた.jsonオブジェクトの使用

最小限のAngular6プロジェクトを作成

@ angular/cliを使用して、ターミナルに「traduction」という名前の新しいプロジェクトを作成します。

ng new traduction --prefix tr
cd traduction
ng serve -o

ngx-translateのインストールとロード

プロジェクトフォルダー「traduction」内のターミナルでnpmを使用します。

npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader

注：以下のバージョンを使用してくださいangular 6

"@ngx-translate/core": "^9.1.1" 
"@ngx-translate/http-loader": "^3.0.1"

およびangular 5の場合、最新バージョン10以降を使用

必要なモジュールをapp.module.tsにインポートします：

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

「TranslateHttpLoader」を返す関数を追加してエクスポートします（AoTで必要）。この場合、作成するHttpLoaderFactory関数は、Httpと.jsonを使用して翻訳をロードできるオブジェクトを返しますが、たとえば、ファイルをロードする代わりにグローバルJavaScript変数を使用する、またはGoogle翻訳を使用する独自のクラスを作成できます：

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

OR

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

次に、モジュールを@NgModuleにインポートする必要があります。これはAngularにこのモジュールをAppModuleにロードするよう指示するインポートです。

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

TranslateServiceを挿入

「app.component.ts」で「TranslateService」を初期化し、TranslateServiceをインポートします。

import { TranslateService } from '@ngx-translate/core';

次に、AppComponentクラス内にサービスを注入し、デフォルト言語を定義します。そして次のステップに備えるために、言語を切り替える機能を追加します。

constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }

  switchLanguage(language: string) {
    this.translate.use(language);
  }

。json翻訳ファイルの作成

次に、assets/i18nフォルダー内に翻訳ファイルを作成します。

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am Arthur, I am 42 years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle Arthur, j'ai 42 ans."
}

これらは、「app.module.ts」で作成した「TranslateHttpLoader」によってロードされる単純な.jsonファイルです。

簡単なタイトルとイントロを翻訳する

App.component.htmlでは、「h1」タグ内に「ディレクティブ」を翻訳したヘッダーを追加します。このディレクティブは、タグ内のテキストを取得し、一致する翻訳に置き換えます。ディレクティブを使用する場合は、タグ内にテキスト以外のものがないことを確認する必要があります。

2番目の例として、「TranslationPipe」を使用して、インライン文字列として定義されたラベルを翻訳します。置換する翻訳内に値がある場合があるため、データオブジェクトを「翻訳」パイプに渡すことができます。

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

言語スイッチャーの統合

上記のapp.component.tsで見た言語スイッチャー関数をボタンにアタッチできます。この場合、言語ごとにボタンを作成し、一致する言語キーでswitchLanguage（）関数を呼び出します。

<button (click)="switchLanguage('en')">en</button>

<button (click)="switchLanguage('fr')">fr</button>

変数で文を翻訳する

前に述べたように、変数を含む文章がある場合があります。この小さな例では、「app.component.ts」内に年齢と名前を持つユーザーオブジェクトがあり、この値を含む文を翻訳したいと思います。

...
export class AppComponent {
  user = {
    name: 'Arthur',
    age: 42
  };
...
}

このオブジェクトを「translate」パイプに渡すため、{{placeholder}}表記を使用して、翻訳のプロパティを使用できます。

src/assets/i18n/en.json

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old."
}

src/assets/i18n/fr.json

{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans."
}

ネストされた.jsonオブジェクトを使用

翻訳をより細かく制御したい場合、たとえば（エンドユーザーの観点から）ページブロックまたは（開発者の観点から）コンポーネントを翻訳する場合、1つのソリューションは次のようになります。 gitリポジトリで説明されているように、ネストされた.jsonオブジェクトを使用します。 -jsonファイルの例は次のようになります。

{
    "Title": "Translation example",
    "Intro": "Hello I am {{name}}, I am {{age}} years old.",
    "Startpage": {
        "TranslationSections": "Hello World"
    },
     "Aboutpage": {
        "TranslationSections": "We are letsboot"
    }
}


{
    "Title": "Exemple de traduction",
    "Intro": "Bonjour je m'appelle {{name}}, j'ai {{age}} ans.",
    "Startpage": {
        "TranslationSections": "Bonjour Monde"
    },
    "Aboutpage": {
        "TranslationSections": "Nous sommes letsboot"
    }
}

および対応するテンプレート：

<h1 translate>Title</h1>

<div>
  {{ 'Intro' | translate:user }}
</div>

<div>
  {{ 'Startpage.TranslationSections' | translate }}
</div>

<div>
  {{ 'Aboutpage.TranslationSections' | translate }}
</div>

<br/>

<button (click)="switchLanguage('en')">en</button>
<button (click)="switchLanguage('fr')">fr</button>
24
Dinesh Ghule

component.module.ts

export function translateHttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })

LanguagService.tsクラス

import { Injectable } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { ReplaySubject } from 'rxjs';
import { take } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class LanguageService {
    language$ = new ReplaySubject<LangChangeEvent>(1);
    translate = this.translateService;
    // 國旗對照;

    constructor(private translateService: TranslateService) {}

    setInitState() {
      this.translateService.addLangs(['en', 'cn','vi']);
      console.log( 'Browser Lang', this.translate.getBrowserLang());
      const browserLang = (this.translate.getBrowserLang().includes('vi')) ? 'vi' : 'cn'  ;
      console.log("anhtt "," anguage  = " +browserLang);

      this.setLang(browserLang);
    }

    setLang(lang: string) {
      this.translateService.onLangChange.pipe(take(1)).subscribe(result => {
        this.language$.next(result);
      });
      this.translateService.use(lang);

    }
  }

app.component.html

<h1>How to multi language in angular 7</h1>
<p >{{'content' |translate}}</p>
<h4 translate>
  {{'message' |translate}}
</h4>
<button (click)="selectLanguageEN()">English</button>
<button (click)="selectLanguageCN()">中國</button>
<button (click)="selectLanguageVI()">Viet Nam</button>

コードデモ：

https://tienanhvn.blogspot.com/2019/06/angular-7-how-to-multi-language.html

0
Tienanhvn