Ionic 3 mit ngx-translate - Lazy loaded

Question

Ich versuche das ngx-translate Plugin in mein Ionic 3 Projekt mit Lazy Loading zu integrieren. Ich habe den Leitfaden auf der Ionic Framework-Website verfolgt.

Die Standardsprache lädt, aber translate.use() hat keine Wirkung.

Ich habe das Projekt auf gitbub gepostet und jede Hilfe würde sehr geschätzt werden. Hier

ist der Link zu dem Repo: https://github.com/sumodevelopment/ngx-translate-test

Answer 1

Aktualisieren Sie Ihre 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 {} 

Und es gibt keine Notwendigkeit zu verwenden TranslateService Provider in Ihrem app.module.ts

Answer 2

ich Stunden damit verbracht, es zum Laufen zu bringen . Schließlich musste ich dem Importabschnitt von app.module.ts hinzufügen (in Ihrem Fall ist es vielleicht - home.module.ts). Ich hoffe, das hilft.

Zuerst: Importieren HttpClientModule Zweitens: Verwenden Sie HttpClient anstelle von Http.

So ist der Code wie folgt: app.module.ts (In Ihrem Fall 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 {} 

In app.component.ts fügen Sie diese Zeile in constructor.

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

Und dann muss man zwei JSON Dateien in ./assets/i18n/ Pfad erstellen.

en.JSON

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

Dann mit PIPE Filter wie dies in Ihrer Anwendung verwenden.

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

ODER

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

Wir können auch eine parameter passieren.

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

ODER

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