AngularJS菜單在離子框架中使用翻譯

我已經添加了Angular NG翻譯成我的應用程序，但是當涉及到嘗試翻譯側面菜單項時，我無法找到一種方法來做到這一點。基本上使用Angular translate需要你使用表達式{{'TEXT1'|但是我在app.component.ts中的sidemenu已經在使用{}我試圖在表達式中使用表達式，但它沒有工作，或者我沒有正確地做到這一點。AngularJS菜單在離子框架中使用翻譯

這是我在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 } 

];

和翻譯各菜單的名稱（網頁A對EG）的方式sidemene是其更改爲：

{{'PageA' | translate }}

正如你所看到的，如果我在表達式中添加額外的表達式，它不再有效。任何幫助/建議將不勝感激。

來源

2017-02-20 bluewavestudio

您可以使用[翻譯服務（HTTPS：/ /angular-translate.github.io/docs/#/guide/03_using-translate-service）在初始化這個'PageInterface []'變量之前轉換字符串 – JLewkovich

JLewkovic h謝謝你。請原諒我對AngularJs的瞭解有限，但我會如何實現這一目標？我以前如何翻譯字符串？ – bluewavestudio

而不是將標題直接設置爲'PageA'，PageB'等。在控制器的某處執行翻譯的地方，你有一些臨時變量，然後在'appPages'塊中使用這個新變量，比如'title：translatedPageA '（注意，沒有單引號是因爲它是一個變量名，有點像'TabsPage'或'PageAPage'） – JLewkovich

我解決了這個問題，從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>

來源

2017-03-28 08:46:04

這正是我用過的解決方案:)我應該回到這裏來回答我自己的問題，但感謝您的迴應並回復。這是我的sidemenu需要調整。 – bluewavestudio

AngularJS菜單在離子框架中使用翻譯

回答

相關問題