0
404
VistasAngular: uso de plantillas renderizadas como cadenas interpoladas para traducción
En mi aplicación Angular, muestro una oración como:
[UserX] comentó [item] de [UserY] en [PlaceZ]
Esta oración (actualmente codificada en inglés) debe traducirse, pero lo complicado es que [UserX] , [UserY] , [item] y [PlaceZ] se representan a través de componentes angulares, incluso dentro de los conmutadores ng-container .
Esto se debe a que se puede hacer clic en estos elementos y tienen su propio avatar y se usan en toda la aplicación para mantener la coherencia.
Aproximadamente se parece a:
<ng-container *ngTemplateOutlet='user;context:{id: "X"}'></ng-container> commented <ng-container *ngTemplateOutlet='impactedEntity'></ng-container> of <ng-container *ngTemplateOutlet='user;context:{id: "Y"}'></ng-container> at <location id="Z"></location> <ng-template #user let-id="id"> <!-- display "you" if same user, etc --> ... </ng-template> <ng-template #impactedEntity> <ng-container [ngSwitch]='type'> ... </ng-template>Mi pregunta es: ¿cuál es una solución simple para traducir esta oración (considerando que el orden de los marcadores de posición puede cambiar completamente de un idioma a otro) e inyectar los elementos "renderizados" ?
Ya he visto algunas opciones comunes para inyectar HTML dentro de i18n:
- dividir la oración en múltiples piezas "alrededor" de marcadores de posición. Pero debido a que hay 4 elementos para "inyectar", eso hace una gran combinatoria.
- coloque el código html directamente en el texto traducido y use
[innerHtml]para que se represente el html. No aplicable porque no es "solo"<a hrefsino una lógica más compleja conng-container. - use
@ViewChild()para obtener el HTML renderizado de cada elemento que necesito inyectar y utilícelo como una cadena simple para la interpolación. Parece el enfoque más realista, pero me preguntaba si no había algo más simple.
¡Gracias por cualquier comentario!
olivier
1 Respuestas
Responde la pregunta0
Respondiendo a mi propia pregunta creo que encontré una solución que encaja bastante bien.
Después de pensar más, esto es lo que se me ocurrió:
- el valor de traducción (en el archivo de traducción) es bastante estándar, parece
"MY_KEY": "{userX} commented {entity} of {userY} at {place}" - al leer el valor de la traducción, interpolo valores con marcadores de posición más explícitos con caracteres especiales:
const label = translateService.instant(MY_KEY, { userX: "|USERX|", userY: "|USERY|", entity: "|ENTITY|", place: "|PLACE|" })- Dividí esta cadena
const elements = label.split('|')- Repaso estos elementos en la plantilla y reemplazo mis propios marcadores de posición con sus componentes
<ng-container *ngFor='let part of elements'> <ng-container *ngSwitchCase='USERX'> <ng-container *ngTemplateOutlet='user;context:{id: "X"}'></ng-container> </ng-container> <ng-container *ngSwitchCase='USERY'> <ng-container *ngTemplateOutlet='user;context:{id: "Y"}'></ng-container> </ng-container> <ng-container *ngSwitchCase='ENTITY'> <ng-container *ngTemplateOutlet='impactedEntity'></ng-container> </ng-container> <ng-container *ngSwitchCase='PLACE'> <location></location> </ng-container> <ng-container *ngSwitchDefault> <!-- Here simply dump the translated words --> {{ part }} </ng-container> </ng-container> </ng-container>Al final, es un poco raro (no demasiado), pero:
- la traducción utiliza un formato estándar
- es totalmente flexible en cuanto al orden de las palabras
- la plantilla permanece legible y no hay manipulación DOM de bajo nivel
¡Estoy feliz!