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菜单在离子框架中使用翻译

回答

相关问题