Ionic 3 with ngx-translate - 懒加载

我试图将ngx-translate插件与延迟加载的Ionic 3项目集成到一起。我遵循了Ionic Framework网站上的指南。Ionic 3 with ngx-translate - 懒加载

使用默认语言加载，但使用translate.use()根本没有任何效果。

我已经发布项目在gitbub和任何帮助将不胜感激。

这里是链接到回购： https://github.com/sumodevelopment/ngx-translate-test

来源

2017-06-05 dewald.els

此解决方案为我https://stackoverflow.com/questions/44691028/ngx-translation-issue-with-ionic-3-app/44698964 – sonu

你能接受回答，同样我也发布了关于离子社区的答案。 – sonu

更新您的home.module.ts

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { Http} from '@angular/http'; 

export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    declarations: [ 
    HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    TranslateModule.forChild({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http] 
     } 
    }) 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 
export class HomePageModule {}

还有没有必要在你app.module.ts

来源

2017-06-23 04:58:49 sonu

我会在本周检查一下。我将在尝试完成后更新此评论。 –

当我尝试导入@ angular/http时，出现一个新错误： '找不到模块'@ angular/common/http'.' 每次我使用Ionic时，都会遇到新问题。这变得非常令人沮丧。 –

尝试使用'@ angular/http'代替'@ angular/common/http' – sonu

使用TranslateService提供我花了几个小时，使其能工作。最后，我不得不将HttpClientModule添加到app.module.ts的进口部分（在您的情况下，也许它是 - home.module.ts）。希望有所帮助。

第一次：导入HttpClientModule 第二次：使用HttpClient而不是Http。

所以，代码如下：app.module.ts（在你的情况home.module.ts）

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular'; 
import { HomePage } from './home'; 

//translate related imports 
import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 

export function createTranslateLoader(http: HttpClient) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    declarations: [ 
     HomePage, 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    HttpClientModule 
    TranslateModule.forRoot({ 
     loader: { 
      provide: TranslateLoader, 
      useFactory: (createTranslateLoader), 
      deps: [HttpClient] 
     } 
    }) 
    ], 
    exports: [ 
    HomePage 
    ] 
}) 

export class HomePageModule {}

在app.component.ts在constructor加入这一行。

import {TranslateService} from '@ngx-translate/core'; 
... 
translate.setDefaultLang('en');//So English language set

然后你有./assets/i18n/路径创建两个JSON文件。

en.JSON

{ 
    "title": "Translation demo", 
    "text": "This is a simple demonstration app for {{value}}" 
}

在您的应用程序，然后使用带有PIPE过滤器这样的。

<h1>{{'title' | translate}}</h1>

<h1 [translate]="'title'"></h1>

我们也可以传递一个parameter。

<h1>{{'text' | translate:{'value':'ngx-translate'} }}</h1>

<h1 [translate]="'text'" [translateParams]="{value: 'ngx-translate'}"></h1>

来源

2018-01-24 08:54:22

Ionic 3 with ngx-translate - 懒加载

回答

相关问题