我用的是 fa
和 en
我的应用程序的语言。有两个按钮,应该是点击后改变方向和语言。setDir(code)
功能。在点击按钮后,应用程序将被重新加载,语言和方向发生变化,但ngx-translation不能正常工作。语言和方向改变了,但ngx-translation不能正常工作。它总是显示fa.json文件的值。即使我设置了 translate.setDefaultLang('en')
.
app.component.ts:
import { Component } from '@angular/core';
import { Platform, ModalController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { Storage } from '@ionic/storage';
import { TranslateService } from '@ngx-translate/core';
export class MyApp {
constructor(public platform: Platform, private storage: Storage,
translate: TranslateService, private modalController: ModalController,
statusBar: StatusBar) {
platform.ready().then(() => {
statusBar.styleDefault();
this.splash = modalController.create(SplashPage);
this.splash.present();
});
translate.setDefaultLang('en');
storage.get('languageCode').then((lang) => {
platform.setLang(lang, true);
translate.use(lang);
});
this.storage.get('myDir').then((dir) => {
platform.setDir(dir, true);
});
}
async setDir(code) {
if (code === "fa") {
await this.storage.set('myDir', 'rtl');
await this.storage.set('languageCode', 'fa');
window.location.reload();
} else {
await this.storage.set('myDir', 'ltr');
await this.storage.set('languageCode', 'en');
window.location.reload();
}
}
}
app.html
<ion-item text-end color="none" menuClose="" id="lis-sell" class="mymenu">
{{'simple_sale' | translate}}
</ion-item>
fa.json
{
"simple_sale": "فروش"
}
en.json
{
"simple_sale": "sale"
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
...
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
@NgModule({
...
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
...
哇。我觉得很愚蠢。一切都很好。它只是我已经定义了两个单独的菜单,我使用ngx-translate的菜单中的值。一个菜单工作在rtl。