2017-07-24 10 views
1

Ich lade die Übersetzung von Dateien vom Server TranslateHttpLoader in meinem app.module.ts wie folgt aus:Ionic3/NGX-translate - TranslateHttpLoader mit externen URL

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

@NgModule({ 
    ... 

    imports: [ 

    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [Http] 
     } 
    }), 

    ], 
    ... 
}) 

Alles funktioniert gut, aber ich bin Ich frage mich, ob es eine Möglichkeit gibt, ein Ereignis abzufangen, wenn der Loader die Sprachdatei aus irgendeinem Grund nicht abrufen kann (Serverprobleme, Netzausfall usw.) und möglicherweise eine lokale json-Datei mit einigen Standard-Übersetzungszeichenfolgen lädt.

Ich möchte dieses Ereignis abfangen, wenn die App beim ersten Laden die Sprachdatei nicht ergreift, und Fallback auf minimale lokale JSON-Datei, um nur übersetzte Mainetnance Seite/Fehlerseite oder etwas anzuzeigen.

Antwort

0

am Ende schrieb ich einen benutzerdefinierten Loader, der die Anforderung löst:

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response } from "@angular/http"; 
import { TranslateLoader } from '@ngx-translate/core'; 
import { AppConfig } from "./config" 
import { Observable } from 'rxjs/Observable'; 


@Injectable() 
export class CustomTranslateLoader implements TranslateLoader { 
    contentHeader = new Headers({"Content-Type": "application/json","Access-Control-Allow-Origin":"*"}); 

    constructor(private http: Http) {} 
    getTranslation(lang: string): Observable<any>{ 
     var apiAddress = AppConfig.API_URL+"/static/i18n/"+ lang+".json"; 
     return Observable.create(observer => { 
      this.http.get(apiAddress, { headers: this.contentHeader }).subscribe((res: Response) => { 
        observer.next(res.json()); 
        observer.complete();    
       }, 
      error => { 
       // failed to retrieve from api, switch to local 
       this.http.get("/assets/i18n/en.json").subscribe((res: Response) => { 
        observer.next(res.json()); 
        observer.complete();    
       }) 
      } 
      ); 
     }); 
    } 
} 

und in app.module.ts

... 
import { CustomTranslateLoader } from "../services/trans-loader" 
... 

@NgModule({ 
    ... 

    imports: [ 

    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useClass: CustomTranslateLoader, 
     deps: [Http] 
     } 
    }), 

    ], 
    ... 
}) 
Verwandte Themen