我在我的ionic3项目中使用了ngx-translate。它在使用离子服务的浏览器中工作正常。但是在 android 中构建并运行它后，它不起作用。它只从翻译文件中返回键。
我使用的离子版本是：
Ionic Framework: 3.6.0
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.1
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
这是我项目中的代码
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IonicApp, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { AppProviders } from './app.providers';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { MyApp } from './app.component';
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
HttpModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
}),
IonicModule.forRoot(MyApp,{tabsPlacement: 'top',tabsHideOnSubPages:"true"}),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers:AppProviders.getProviders()
})
export class AppModule {}
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { TranslateService } from '@ngx-translate/core';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: string = "HomePage";
pages: Array<{title: string, component: any, name:string}>;
constructor(
platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
private storage: Storage,
translate: TranslateService) {
translate.setDefaultLang('np');
translate.use('np');
// used for an example of ngFor and navigation
this.pages = [
{ title: 'home', component: "HomePage", name:"home"},
{ title: 'speaker', component: "SpeakerPage", name:"microphone"},
];
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
应用.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar class="site-title">
<img src="assets/img/logo.png" />
<ion-title>{{'APPTITLE' | translate }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list class="side-menu">
<button menuClose ion-item *ngFor="let p of pages" icon-left (click)="openPage(p)">
<ion-icon [name]="p.name"></ion-icon>
{{p.title | translate}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在资产\i18n 中：
- en.json
- np.json
en.json
{
"APPTITLE": "Parliament of Nepal"
}
np.json
{
"APPTITLE": "नेपालको संसद"
}
这是我的包.json
{
"name": "lpsn-mobile-app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.3",
"@angular/compiler": "4.1.3",
"@angular/compiler-cli": "4.1.3",
"@angular/core": "4.1.3",
"@angular/forms": "4.1.3",
"@angular/http": "4.1.3",
"@angular/platform-browser": "4.1.3",
"@angular/platform-browser-dynamic": "4.1.3",
"@ionic-native/core": "3.12.1",
"@ionic-native/in-app-browser": "^4.2.1",
"@ionic-native/native-audio": "^4.2.1",
"@ionic-native/splash-screen": "3.12.1",
"@ionic-native/sqlite": "^4.2.1",
"@ionic-native/status-bar": "3.12.1",
"@ionic-native/streaming-media": "^4.2.1",
"@ionic/storage": "^2.0.1",
"@ngx-translate/core": "^7.2.1",
"@ngx-translate/http-loader": "^0.1.0",
"com.hutchind.cordova.plugins.streamingmedia": "~0.1.4",
"cordova-android": "^6.2.3",
"cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4",
"cordova-plugin-inappbrowser": "^1.7.1",
"cordova-plugin-nativeaudio": "^3.0.9",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-streaming-media": "^1.0.2",
"cordova-plugin-whitelist": "^1.3.1",
"cordova-sqlite-storage": "^2.0.4",
"ionic-angular": "3.6.0",
"ionic-audio": "^3.0.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"ng2-select": "^1.2.0",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"@ionic/app-scripts": "2.1.4",
"typescript": "2.3.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-inappbrowser": {},
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-sqlite-storage": {},
"com.hutchind.cordova.plugins.streamingmedia": {},
"cordova-plugin-nativeaudio": {}
},
"platforms": [
"android"
]
}
}
从中删除./：
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
=> 将 src 写入资产时不要写入任何./或../。
在app.modules.ts中编写：
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}
或现在
export function createTranslateLoader(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}
为我工作。
您使用的是旧版本的"@ngx-translate/core": "^7.2.1",。因此，您需要使用它的最新版本。
"@ngx-translate/core": "^8.0.0",
npm install @ngx-translate/core --save