Angular 角度2-多语言支持

我们在应用程序中使用Angular 2.0。在该应用程序中，我们希望提供多语言支持。我们知道如何使用angular 1.0实现。但不知道如何在2.0中使用。

i18n在Angular2中的使用仍在进行中，似乎尚未可用

另见

这个类似的问题我可以推荐library，它很容易集成和使用

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 {}

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);
  }
}

3。app.components.ts

import {TranslateModule} from '@ngx-translate/core';

@NgModule({
   declarations: [...],
   imports     : [TranslateModule.forRoot(), ...],
   exports      : [...],
   providers   : [...],
   bootstrap   : [AppComponent]
})

export class AppModule {}

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>

hy.json

---

，现在有空吗？这方面有什么指导原则吗？在这方面如何注意搭配。看起来我们必须生成.xlf文件并进行渲染。另一个是在一种JSON中定义并加载它。这样做吗？如果必须翻译动态到达的数据，您更喜欢什么！对不起，我不知道。我没用过安格拉斯i18n。AFAIR在支持代码翻译方面还有一个悬而未决的问题。app.components.ts不从“ng2 translate”导入TranslateService，而是从@ngx translate/core导入它您只需要将它添加到app组件或每个使用它的组件上吗？因为应用程序组件是一切的开始->所以在我的其他htmls中，我可以假设它是导入的？@fangio如果你想使用它，你必须导入

TranslateService

，例如，你想更改当前语言、检测语言更改或获得翻译。如果您想像这样使用translate管道，

{{“contact”| translate}}

您不需要在组件中导入任何来自ngx translate的内容。@styopdev我按照您的步骤进行了操作，但没有得到translation@styopdevangular如何知道在哪里找到i18n文件夹？