Angular 2 - 多语言支持

Question

我们在我们的应用程序中使用Angular 2.0。在那个应用程序中我们想要提供多语言支持。我们知道使用angular 1.0如何实现。但不知道如何在2.0中使用。

Answer 1

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

<强> 1。通过npm安装

npm install @ngx-translate/core --save

<强> 2。在app.module.ts导入中添加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" : "Հետադարձ կապ"
}

Answer 2

Angular2中的i18n仍在进行中，似乎还没有用。

另见https://github.com/angular/i18n/issues/28

和类似的问题Angular2 i18n at this point?