Angular 2 - Support multilingue

Question

Nous utilisons Angular 2.0 dans notre application. Dans cette application, nous voulons fournir un support multilingue. Nous savons utiliser angular 1.0 comment mettre en œuvre. Mais ne le faites pas savoir utiliser en 2.0.

Answer 1

Je peux recommander ngx-translate bibliothèque, c'est très facile à intégrer et à utiliser.

1. Installer via npm

npm install @ngx-translate/core --save

2. Ajouter TranslateModule dans les importations 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

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. Créer un dossier i18n avec des fichiers de traduction

en.json

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

hy.json

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

Answer 2

i18n dans Angular2 est toujours en cours de réalisation et ne semble pas encore utilisable.

Voir aussi https://github.com/angular/i18n/issues/28

et cette question similaire Angular2 i18n à ce stade?