Ionic 3 avec ngx-translate - Lazy loaded

Question

J'essaie d'intégrer le plugin ngx-translate dans mon projet Ionic 3 avec un chargement paresseux. J'ai suivi le guide sur le site web d'Ionic Framework.

La langue par défaut se charge mais l'utilisation de translate.use() n'a aucun effet.

J'ai posté le projet sur gitbub et toute aide serait grandement appréciée.

Voici le lien vers le repo: https://github.com/sumodevelopment/ngx-translate-test

Answer 1

Mettez à jour votre 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 {} 

Et pas besoin d'utiliser TranslateService fournisseur dans votre app.module.ts

Answer 2

Je passais des heures à le faire fonctionner . Enfin, je devais ajouter HttpClientModule à la section d'importation de app.module.ts (dans votre cas, c'est peut-être - home.module.ts). J'espère que cela pourra aider.

Première: Importer HttpClientModule Deuxième: Utiliser HttpClient au lieu de Http.

Ainsi, le code est le suivant: app.module.ts (Dans votre cas 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 {} 

En app.component.ts ajouter cette ligne dans constructor.

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

Et vous devez créer deux fichiers dans le chemin JSON./assets/i18n/.

en.JSON

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

Ensuite, utilisez dans votre application avec PIPE filtre comme celui-ci.

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

OU

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

Nous pouvons également passer un parameter.

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

OU

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