ng2-translate组件文件

时间:2016-11-30 11:18:06

标签: angular ionic2 ng2-translate

即时通讯在我的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上的conf:

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] 
    })
  ],
  ...

2 个答案:

答案 0 :(得分:1)

正如您所说,p.title的{​​{1}}值与pantryinventory类似,那么您必须使用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>

答案 1 :(得分:0)

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