ionic2对菜单项应用ngx-translate [英] ionic2 apply ngx-translate for menu items

问题描述

我正在使用ngx-translate获得多语言支持，它运行正常。但我也想申请菜单项目。我如何实现这一目标。

我有3个菜单项，我想更改每个标题的语言。

ts file

  appPages：PageObj [] = [
 {title：'Profile'，组件：ProfilePage，图标：'person'} ，
 {标题：'我的帐户'，组件：MyaccountPage，索引：1，图标：'现金'}，
 {标题：'常见问题'，组件：FaqPage，索引：3，图标：' chatbubbles'} 
]; 
  

HTML

 < button ion-item menuClose * ngFor =let p of appPages（click）=openPage（p）> 
< ion-icon item-left [name] =p.icon>< / ion-icon> 
 {{p.title}} 
< / button> 
  

和我的module.ts

 从'@ angular / core'导入{NgModule};来自'@ angular / platform-b​​rowser'的
 import {BrowserModule}; 
从'@ angular / common / http'导入{HttpClientModule，HttpClient}; 
从'@ngx-translate / core'导入{TranslateModule，TranslateLoader};来自'@ngx-translate / http-loader'的
 import {TranslateHttpLoader};来自'./app'的
 import {AppComponent}; 
 
 // AoT需要工厂的导出函数
导出函数HttpLoaderFactory（http：HttpClient）{
返回新的TranslateHttpLoader（http）; 
} 
 
 @NgModule（{
进口：[
 BrowserModule，
 HttpClientModule，
 TranslateModule.forRoot（{
 loader] ：{
提供：TranslateLoader，
 useFactory：HttpLoaderFactory，
 deps：[HttpClient] 
} 
}）
]，
 bootstrap： [AppComponent] 
}）
导出类AppModule {} 
  

解决方案

首先，您应该在资源文件夹中为差异语言创建json文件，例如 en.json，fr.json，kh.json 。

en.json：

  {
 //您的内容......，
个人资料：个人资料，
MY_ACCOUNT： 我的帐户，
常见问题解答：常见问题解答
} 
  

并更改PageObj的标题如下：

  appPages：PageObj [] = [
 {title：'PROFILE'，组件：ProfilePage，图标：'person'}，
 {title：'MY_ACCOUNT' ，组件：MyaccountPage，index：1，icon：'cash'}，
 {title：'FAQ'，component：FaqPage，index：3，icon：'chatbubbles'} 
]; 
  

并更正你的app.module.ts：

 从'@ angular / core'导入{NgModule};来自'@ angular / platform-b​​rowser'的
 import {BrowserModule};来自'@ angular / http'的
 import {Http，HttpModule}; 
从'@ngx-translate / core'导入{TranslateModule，TranslateLoader};来自'@ngx-translate / http-loader'的
 import {TranslateHttpLoader};来自'./app'的
 import {AppComponent}; 
 
 // AoT需要工厂的导出函数
导出函数HttpLoaderFactory（http：Http）{
返回新的TranslateHttpLoader（http，'。/ assets / i18n /'，'上传.json'）; 
} 
 
 @NgModule（{
进口：[
 BrowserModule，
 HttpModule，
 TranslateModule.forRoot（{
 loader] ：{
提供：TranslateLoader，
 useFactory：HttpLoaderFactory，
 deps：[Http] 
} 
}）
]，
 bootstrap： [AppComponent] 
}）
导出类AppModule {} 
  

在您的视图中（ * .html ），您需要使用翻译管道：

 < button ion-item menuClose * ngFor =let p of appPages（click）=openPage（p）> 
< ion-icon item-left [name] =p.icon>< / ion-icon> 
 {{p.title |翻译}} 
< / button> 
  

如果你想设置默认语言或使用语言：

  //当在当前语言中找不到翻译时，此语言将用作后备
 translate.setDefaultLang（'en'）; 
 
 //要使用的lang，如果lang不可用，它将使用当前的加载器来获取
 translate.use（'en'）; 
  

您可以使用以下网址阅读Angular 2+的国际化（i18n）库：http：//www.ngx-translate.com

<希望这可能会有所帮助;）

I am using ngx-translate for multi language support and it is working fine. but i want to apply for menu items also. How do i achieve this.

I have 3 menu items, i want to change the language for every title.

ts file

appPages: PageObj[] = [
    { title: 'Profile', component: ProfilePage, icon: 'person' },
    { title: 'My Account', component: MyaccountPage, index: 1, icon: 'cash' },    
    { title: 'FAQ', component: FaqPage, index: 3, icon: 'chatbubbles' }    
  ];

HTML

 <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
    <ion-icon item-left [name]="p.icon"></ion-icon>
     {{p.title}}
 </button>

And my module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

解决方案

First you should create json file for difference languages in assets folder such as en.json, fr.json, kh.json.

en.json:

{
  // Your content...,
  "PROFILE": "Profile",
  "MY_ACCOUNT": "My Account",
  "FAQ": "FAQ"
}

And change title of PageObj as below:

appPages: PageObj[] = [
    { title: 'PROFILE', component: ProfilePage, icon: 'person' },
    { title: 'MY_ACCOUNT', component: MyaccountPage, index: 1, icon: 'cash' },    
    { title: 'FAQ', component: FaqPage, index: 3, icon: 'chatbubbles' }    
  ];

And correct your app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { Http, HttpModule } from '@angular/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {AppComponent} from './app';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [Http]
            }
        })
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

In your view (*.html), you need to use translate pipe:

<button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)">
    <ion-icon item-left [name]="p.icon"></ion-icon>
     {{ p.title | translate }}
 </button>

if you want to set default or use language:

// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');

// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');

You can read The internationalization (i18n) library for Angular 2+ with this url : http://www.ngx-translate.com

Hope this could help ;)

这篇关于ionic2对菜单项应用ngx-translate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！