Angular 2 - 多语言支持答案

【问题标题】：Angular 2 - Multilingual SupportAngular 2 - 多语言支持
【发布时间】：2016-02-18 11:08:27
【问题描述】：

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

【问题讨论】：

【解决方案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" : "Հետադարձ կապ"
}

【讨论】：

3. app.components.ts 而不是从“ng2-translate”导入 TranslateService，而是从 @ngx-translate/core 导入它
只需要在app组件中添加还是在每个使用它的组件上添加？因为应用程序组件是一切的开始 -> 所以在我的其他 html 中我可以假设它是导入的？
@fangio 你必须导入TranslateService 以防你想使用它，例如。您想更改当前语言、检测语言更改或获取翻译。如果您只想使用 {{ "contact" | translate }} 这样的翻译管道，则无需在组件中从 ngx-translate 导入任何内容。
@styopdev 我按照你的步骤操作，但我没有得到翻译
@styopdev Angular 如何知道在哪里可以找到 i18n 文件夹？

【解决方案2】：

Angular2 中的 i18n 仍在进行中，似乎还不能使用。

另见https://github.com/angular/i18n/issues/28

还有这个类似的问题Angular2 i18n at this point?

【讨论】：

,现在有货了吗？是否有任何指导方针可以做到这一点。
这里面的搭配是如何讲究的。看起来我们必须生成 .xlf 文件并渲染它。另一个在一种 JSON 中定义并加载它。这些方法可以吗？如果必须翻译动态到达的数据，您会更喜欢什么！
对不起，我不知道。我没有使用过 Angulars i18n。 AFAIR 有一个未解决的问题来支持代码翻译。