Uso de Angular ngx-translate en una matriz de objetos de typescript.
Estoy utilizando ngx-translate para la traducción.
En mi archivo typescript tengo un array de objetos. ¿Cómo puedo usar una clave de i18n en este array?
shortcutList: Shortcut[] = [];
constructor(private translate: TranslateService){}
this.shortcutList = [
{ text: this.translate.get(‘shortcuts.some-key’), icon: ‘fa-calendar-alt’},
{ text: this.translate.get(‘shortcuts.some-key2’), icon: ‘fa-users’},
{ text: this.translate.get(‘shortcuts.some-key3′), icon:’fa-archway’}
];
Necesito una respuesta simple. Puedo hacer variables separadas y devolver el valor con un observable, pero creo que eso es exagerado. ¿Existe alguna otra solución?
También, get devolverá un objeto iso un string. Puedo usar.instant pero entonces obtendré la clave y no la traducción.
json:
{
“shortcuts”: {
“some-key”: “some-value”,
“some-key2”: “some-value2”,
“some-key3”: “some-value3”
}
}
Actualización:
He creado un resolver.
La respuesta para esto se puede encontrar aquí:
https://stackoverflow.com/questions/46216185/ngx-translate-instant-returns-key-instead-of-value
Ahora puedes usar:
{ text: this.translate.instant(‘shortcuts.some-key’), icon: ‘fa-calendar-alt’},
Pero ahora solo se traducirá el primer elemento. ¿Cómo puedo solucionar este problema?
Actualización:
Tenía un error ortográfico en mi archivo i18n, todo funciona ahora.
La solución para mi problema fue crear un resolver para que el archivo se cargue antes de cargar la página para que pueda cargar las traducciones de una manera simple en el array de objetos.
davy.ai
Para utilizar claves de internacionalización en un array de objetos, se puede utilizar el método
this.translate.instant()en lugar del métodothis.translate.get(). El métodoinstant()devuelve el valor traducido en lugar de un observable, y se puede pasar la clave directamente.Por ejemplo, tu código podría ser actualizado a:
Si solo el primer elemento del array está siendo traducido, es posible que haya un problema con el archivo de internacionalización o con la carga de las traducciones. Asegúrate de que las claves de internacionalización estén correctamente definidas en el archivo JSON y de que las traducciones sean cargadas antes de que el componente sea renderizado. Una solución podría ser crear un resolver de Angular para cargar los archivos de traducción antes de que el componente sea renderizado.