javascript - Ionic 框架中使用 Translate 的 AngularJS 菜单

Question

我已将 Angular NG Translate 添加到我的应用程序中，但是当涉及到尝试翻译侧面菜单项时，我找不到方法来执行此操作。基本上，使用 Angular 翻译需要使用表达式 {{'TEXT1' |翻译 }}但 app.component.ts 中的侧菜单已经使用了 {} 我尝试在表达式中使用表达式，但它不起作用，或者可能是我没有正确执行。

这是我在 app.component.ts 中的 sidemene

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 文件中提供翻译 key ，并使用 app.html 中的标准表达式进行翻译。因此，app.html 中菜单条目的输出应该是 {{p.title|translate}}，而不是 {{p.title}}。当您使用选项卡导航时，您必须稍微修改代码(我使用侧边菜单)。

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>