Angular 2 - Многоязычная поддержка

Question

Мы используем Angular 2.0 в нашем приложении. В этом приложении мы хотим оказать многоязычную поддержку. Мы знаем, как использовать angular 1.0. но не знаю, как использовать в 2.0.

Answer 1

Я могу порекомендовать библиотеку ngx-translate, ее очень легко интегрировать и использовать.

1. Установите через npm

npm install @ngx-translate/core --save

2. Добавьте TranslateModule в импорт 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. Создайте папку i18n с файлами перевода

en.json

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

hy.json

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

Answer 2

i18n в Angular2 все еще находится в стадии разработки и, похоже, еще не пригоден для использования.

Смотрите также https://github.com/angular/i18n/issues/28

а этот похожий вопрос Angular2 i18n на данный момент?

Answer 3

Я понял - Ionic 2 | Интернационализация и локализация вашего приложения с Angular 2

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