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 - 懶加載

回答

相關問題