Angular 2 - 多語言支持

Question

我們在我們的應用程序中使用Angular 2.0。在那個應用程序中，我們要給多語言支持。我們知道使用angular 1.0如何實現。但不知道如何在2.0中使用。

Answer 1

Angular2中的i18n仍在進行中，似乎尚未可用。

又見https://github.com/angular/i18n/issues/28

這類似的問題Angular2 i18n at this point?

Answer 2

我得到了它 - 離子2 |國際化和本地化您的應用角2

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

Answer 3

我可以推薦ngx-translate庫，它很容易集成和使用。

1.通過NPM在app.module.ts進口安裝

npm install @ngx-translate/core --save 

2.添加TranslateModule

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

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

export class AppModule {} 

3. app.components.ts

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.創建翻譯文件夾i18n的

en.json

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

hy.json

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