AngularJSメニューのイオンフレームワークで翻訳を使用

Question

私はAngular NGを追加しました。私のアプリに翻訳しますが、サイドメニュー項目を翻訳しようとすると、これを行う方法が見つかりません。基本的にAngular translateを使用するには、式{{'TEXT1' | translate}} しかし、app.component.tsの私のsidemenuは既に{}を使用しています。式で式を使用しようとしましたが、うまくいきませんでした。

{{'PageA' | translate }} 

：ここ

は、メニュー名（例のためのページA）のそれぞれを変換する方法は、それらを変更することである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 } 

]; 

との私のsidemeneですご覧のように、式の中に余分な式を追加しても、それはもう機能しません。どんな助力/提案も非常に高く評価されるでしょう。

Answer 1

app.component.tsのjsonファイルの変換キーをapp.htmlの標準式に変換してこの問題を解決しました。したがって、{{p.title}}の代わりに、app.htmlのメニュー項目の出力はである必要があります。タブナビゲーションを使用するときは、コードを少し修正する必要があります（私はサイドメニューを使用します）。

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>