Angular：Angular4で多言語サポートを有効にする方法

Question

私はangleJs（バージョン4）で構築されたアプリケーションを持っています。私はこのアプリを2つの言語（フランス語と英語）で利用できるようにしたいと考えています。私は公式の文書をチェックしましたが、私は混乱していて、それをやる方法がありませんでした。誰も私のアプリを翻訳するための簡単なステップを与えることができますか？前もって感謝します。

Answer 1

をインストールするには、このplunker sample

コマンドでサンプルの構成と実施例を探すことは良いツールウィッヒはあなたが望むものを達成するのを助けることができます。ここではステップバイステップでそれを行う方法です：
最初のNGX-翻訳をインストールします。

npm install @ngx-translate/core --save 

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

あなたの言語ファイルを定義します。en.jsonファイルを作成 と内容は次のようになります。

フランス語の翻訳を使用してfr.jsonファイルの

{ 
    "TEXT": "your text in english here! ", // add many as you need ! 
} 

同じ

編集あなたapp.module.ts：今
あなただけのようなあなたのテンプレートに変換するパイプを使用することができるはずです：@NgModuleデコレータの輸入の

import {TranslateModule, TranslateLoader} from "@ngx-translate/core"; 
    import {TranslateHttpLoader} from "@ngx-translate/http-loader"; 

    export function HttpLoaderFactory(httpClient: HttpClient) { 
     return new TranslateHttpLoader(httpClient, "i18n/", ".json"); 
    } 

はパイプを翻訳TranslateModule.forRoot()
使用を追加します次のようになります。

{{ 'TEXT' | translate }} 

言語を変更する権限をユーザーに付与する必要があります。コンポーネントを変更する必要があることを行うためには： このインポートを追加：import {TranslateService} from '@ngx-translate/core'; とコンストラクタを変更します。

constructor(private translate: TranslateService) { 
     translate.addLangs(["en", "fr"]); 
     translate.setDefaultLang('en'); 

     let browserLang = translate.getBrowserLang(); 
     translate.use(browserLang.match(/en|fr/) ? browserLang : 'en'); 
    } 

ユーザーが現在のlangaugeを変更することができるように、あなたのHTMLテンプレートにこのような何かを追加：

<select #langSelect (change)="translate.use(langSelect.value)"> 
      <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option> 
     </select> 

最高の運！

Answer 2

Ng translateはangular2でサポートされません。 angular2と4ウェブアプリケーションでngx-translateを使用できます。 NGX-変換パッケージ

npm install @ngx-translate/core --save 

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