Problema :
Tengo texto dinámico que proviene del archivo Json. Estoy usando el método translate.get() como este:
this.translate.get('keyInJson').subscribe(res => { this.valueFromJson = res; /* creating an object using above text */ });Como esto es asíncrono, no puedo obtener el texto traducido cuando se procesa la página. Intenté envolver el método anterior dentro de Observables , Promises pero no puedo obtener la versión traducida del texto durante la carga de la página. Pude obtener el texto traducido después de probar diferentes enfoques, pero el código se volvió demasiado complejo y no confiable.
Comportamiento esperado/deseado Debe cargar la versión traducida del texto
Reproducción del problema Genere dinámicamente el texto en lugar de codificarlo en html y luego intente renderizar la versión traducida.
Entorno Angular2, mecanografiado, Ionic 2
instant(key: string|Array, interpolateParams?: Object): string|Object: Obtiene el valor traducido instantáneo de una clave (o una matriz de claves). Este método es síncrono y el cargador de archivos predeterminado es asíncrono. Usted es responsable de saber cuándo se cargaron sus traducciones y cuándo es seguro usar este método .
const translated = this.translate.instant('keyInJson');@masterach TranslateHttpLoader es lo que está buscando. Aquí hay un artículo que podría ser útil para usted.
He estado usando @ ngx-translate desde hace un tiempo. Yo uso el módulo de dos maneras:
{{'código_a_traducir' | traducir }}
const traducirTexto: string = this.translateService.instant('code_to_translate')
el servicio de traducción debe pasarse en el constructor de su componente (o servicio)
por lo general, declaro el resultado de la cadena en mi función app.ini antes de cargar los componentes y uso solo un servicio de traducción para toda mi aplicación. También declaro mi TranslateLoader personalizado para administrar la fuente de las traducciones desde cualquier lugar (api externa, archivo json, etc.)
¿Por qué no usa la tubería en html en lugar de traducir en ts?
<div>{{ 'HELLO' | translate:param }}</div>o
<div [innerHTML]="'HELLO' | translate"></div>