angular - Angular6 - cargar traducciones usando llamada API al backend usando ngx-translate
Quiero usar ngx-translate en mi frontend para cargar dinámicamente las traducciones al iniciar la aplicación.
Mi backend devuelve una respuesta en formato JSON, por ejemplo:
{
"something: "something"
}
Quiero usar esa salida en mi TranslateLoader en lugar de un archivo en.json local.
¿Hay alguna manera de lograr eso?
TL;DR: Quiero llamar a 'http://localhost:xxxx/api/translation/EN' para obtener una respuesta JSON de las traducciones y cargarla en TranslateHttpLoader
Respuesta #1
Puedes crear una fábrica:
export function httpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "http://localhost:xxxx/api/translation/", "");
}
Y úsalo en los imports de tu @NgModule:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: httpLoaderFactory,
deps: [HttpClient]
}
}),
Respuesta #2
Podemos lograrlo usando el proveedor TranslateLoader con una clase Loader personalizada
In Module :
export class CustomLoader implements TranslateLoader {
constructor(private http: Http) {}
public getTranslation(lang: String): Observable<any> {
return this.http.get(URL).map(
(res: any) => {
return res;
}
);
}
}
@NgModule({
imports: [
TranslateModule.forRoot({
provide: TranslateLoader,
useClass: CustomLoader,
// useFactory: (createTranslateLoader),
deps: [Http]
})
]
})
En el Componente:
constructor(private _translate: TranslateService){}
const transText = this._translate.instant('something');
