ng2-translate 组件文件答案

【问题标题】：ng2-translate on component fileng2-translate 组件文件
【发布时间】：2017-04-14 16:41:02
【问题描述】：

我在我的 ionic2 应用程序上使用 ng2-translate，我让它在 html 上的静态文本上运行良好，例如：

<ion-title>{{ 'Inventory.view-header' | translate }}</ion-title>

我翻译了这个标题，但是当我尝试翻译这个时：

<ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
  <ion-icon color="gray" name="{{p.icon}}" item-left></ion-icon>
  {{p.title}}
</ion-item>

我无法使用翻译管道作为离子标题翻译 p.title。我只能这样做：

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  this.pages[0].title = event.translations.Menu.pantry;
  this.pages[1].title = event.translations.Menu.inventory;
...

但我不想订阅我要翻译的每个 ngfor 或数组。还有另一种方法可以完成这项工作吗？

我对 app.module 的配置：

import { TranslateStaticLoader, TranslateModule, TranslateLoader} from 'ng2-translate';
export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, './assets/i18n', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (createTranslateLoader),
      deps: [Http] 
    })
  ],
  ...

【问题讨论】：

在p.title 上使用translate 管道时是否遇到任何错误？
如果我将{{p.title | translate}} 与此键title: 'pantry' 和title: 'inventory' 一起使用，我会在我的sidemenu 上找到键而不是翻译

标签： angular ionic2 ng2-translate

【解决方案1】：

正如您所说，您的p.title 值类似于pantry、inventory，那么您必须使用translate 管道，如下所示：

<ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
  <ion-icon color="gray" name="{{p.icon}}" item-left></ion-icon>
  {{ 'Menu.' + p.title | translate }}
</ion-item>

【讨论】：

omfg im 智障哈哈忘记了“菜单”……太棒了，这很完美

【解决方案2】：

在这里，您可以使用 TranslationPipe 和 TranslationService 找到 Ionic2 rc3 的存储库。 https://github.com/philipphalder/ionic2-rc3-NG2-Translate

【讨论】：