Question

我已将Angular NG Translate添加到我的应用程序中，但是当尝试翻译侧面菜单项时，我无法找到方法来执行此操作。基本上使用Angular翻译需要您使用表达式{{＆＃39; TEXT1＆＃39; |翻译}} 但我在app.component.ts中的sidemenu已经在使用{}我试图在表达式中使用表达式并且它没有用，或者我没有正确地执行它。

这是我在app.component.ts

中的副作用

appPages: PageInterface[] = [
  { title: 'PageA', component: TabsPage, tabComponent: PageAPage },
  { title: 'PageB', component: TabsPage, tabComponent: PageBPage },
  { title: 'PageC', component: TabsPage, tabComponent: PageCPage },
  { title: 'PageD', component: TabsPage, tabComponent: PageDPage }

];

以及翻译每个菜单名称（例如PageA）的方法是将它们更改为：

{{'PageA' | translate }}

如您所见，如果我在表达式中添加额外的表达式，它将不再有效。任何帮助/建议将不胜感激。

Answer 1

我在app.component.ts中从我的json文件中提供翻译密钥并使用app.html中的标准表达式进行翻译时解决了这个问题。因此，app.html中菜单条目的输出应为{{p.title}}而不是{{p.title|translate}}。当您使用选项卡导航时，您必须稍微修改代码（我使用侧面菜单）。

app.component.ts：

appPages: PageInterface[] = [
  { title: 'PAGE_A_TITLE', component: Page1 },
  { title: 'PAGE_B_TITLE', component: Page2 },
  { title: 'PAGE_C_TITLE', component: Page3 },
  { title: 'PAGE_D_TITLE', component: Page4 }
];

en.json：

{
    "PAGE_A_TITLE": "This is page one",
    "PAGE_B_TITLE": "Title for page two",
    "PAGE_C_TITLE": "And one more",
    "PAGE_D_TITLE": "Page 4"
}

app.html：

<ion-content>
    <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title|translate}}
        </button>
    </ion-list>
</ion-content>

使用Translate的Ionic Framework中的AngularJS菜单

1 个答案: