web-dev-qa-db-ja.com

Angular 2-多言語サポート

アプリケーションではAngular 2.0を使用しています。このアプリケーションでは、多言語サポートを提供したいと考えています。angular 1.0を使用して実装する方法を知っています。ただし、 2.0での使い方を知っている。

angularmultilingual
9
Popat Shirsath

ngx-translate ライブラリをお勧めします。統合して使用するのは非常に簡単です。

1。 npm経由でインストール

npm install @ngx-translate/core --save

2。 app.module.ts importsに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" : "Հետադարձ կապ"
}
27
styopdev

angular2のi18nはまだ開発途上であり、まだ使用できないようです。

参照 https://github.com/angular/i18n/issues/28

そしてこの同様の質問 この時点でAngular2 i18n？

1
Günter Zöchbauer