角2 - 多言語サポート

Question

私たちはアプリケーションでAngular 2.0を使用しています。このアプリケーションでは、多言語サポートを提供したいと考えています。角度1.0を使用して実装する方法を知っています。 2.0での使用方法はわかりません。

Answer 1

Angular2のi18nはまだ進行中であり、まだ使用可能ではないようです。 |イオン2 -

もhttps://github.com/angular/i18n/issues/28

を参照してください、私はそれを得たAngular2 i18n at this point?

Answer 2

この同様の質問角度2

http://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/

Answer 3

であなたのアプリケーションを国際化とローカライズ私はそれを統合し、非常に使いやすいです、ngx-translateライブラリをお勧めすることができます。

1. app.module.ts輸入

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

@NgModule({ 
    declarations: [...], 
    imports  : [TranslateModule.forRoot(), ...], 
    exports  : [...], 
    providers : [...], 
    bootstrap : [AppComponent] 
}) 

export class AppModule {} 

3. app.components.ts

でTranslateModuleを追加NPM経由

npm install @ngx-translate/core --save 

2をインストールします。

import {Component} from '@angular/core'; import {TranslateService} from '@ngx-translate/core'; @Component({ selector : 'app', templateUrl: './app.component.html', }) export class AppComponent { constructor(private translate: TranslateService) { translate.addLangs(['en', 'hy']); translate.setDefaultLang('en'); translate.use('en'); } changeLang(lang: string) { this.translate.use(lang); } } 

4. app.component.html

<nav> 
    <a [routerLink]="['/']">  
    {{ "home" | translate }} 
    </a> 
    | 
    <a [routerLink]="['/about']"> 
    {{ "about" | translate }} 
    </a> 
    | 
    <a [routerLink]="['/contact']"> 
    {{ "contact" | translate }} 
    </a> 
</nav> 
<div class="lang-bar"> 
    <a (click)="changeLang('en')">EN</a> 
    <a (click)="changeLang('hy')">ՀՅ</a> 
</div> 

5.翻訳ファイル

en.json

{ 
    "home" : "Home", 
    "about" : "About", 
    "contact" : "Contact" 
} 

hy.json

と国際化フォルダを作成します。

{ 
    "home" : "Գլխավոր", 
    "about" : "Մեր մասին", 
    "contact" : "Հետադարձ կապ" 
}