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 此时？