2017-07-24 1 views
1

Je suis le chargement des fichiers de traduction à partir du serveur en utilisant TranslateHttpLoader dans mes app.module.ts comme ceci:Ionic3/NGX-translate - TranslateHttpLoader avec l'URL externe

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] 
     } 
    }), 

    ], 
    ... 
}) 

Tout fonctionne très bien, mais je suis se demander s'il existe un moyen d'attraper l'événement lorsque le chargeur ne parvient pas à récupérer le fichier de langue pour une raison quelconque (problèmes de serveur, net con etc) et éventuellement charger un fichier json local avec des chaînes de traduction par défaut? Je veux attraper cet événement si l'application sur le premier chargement ne parvient pas à saisir le fichier de langue, et retombe au fichier json local minimal pour afficher simplement la page de page d'erreur traduite/page d'erreur ou quelque chose.

Répondre

0

à la fin je l'ai écrit un chargeur sur mesure qui résout l'exigence:

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();    
       }) 
      } 
      ); 
     }); 
    } 
} 

et app.module.ts

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

@NgModule({ 
    ... 

    imports: [ 

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

    ], 
    ... 
})