ionic2 为菜单项应用 ngx-translate

Question

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

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

ts 文件

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>

还有我的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 { }

Answer 1

您可以使用每个侧面菜单项中的 title 属性作为翻译键，如下所示：

// Language file
// en.json
{
  // Your content...,
  "PROFILE": "Profile",
  "MY_ACCOUNT": "My Account",
  "FAQ": "FAQ"
}

并且在您的 .ts 文件中：

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' }    
  ];

然后在视图中，只需将 translate 管道添加到每个菜单项：

<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>

Answer 2

首先，您应该在资产文件夹中为不同的语言创建 json 文件，例如 en.json、fr.json、kh.json .

en.json:

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

并如下更改 PageObj 的标题：

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' }    
  ];

并更正你的 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 { }

在你看来（*.html），你需要使用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>

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

// 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

希望这对您有所帮助 ;)

ionic2 为菜单项应用 ngx-translate

ionic2 apply ngx-translate for menu items

typescript

ionic2

ngx-translate

ionic3

angular

ts 文件

HTML

还有我的module.ts