internationalization - ng2 - ngx-translate angular 4
Angular2 i18n en este punto? (6)
El soporte para i18n ahora es oficial en Angular 2 RC6
Blog de lanzamiento oficial:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html
Una muestra de internacionalización con Angular 2 RC6
https://github.com/StephenFluin/i18n-sample
Más información sobre cómo funciona el nuevo concepto de i18n en angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015
Decidimos darle un giro y comenzamos un proyecto nuevo usando Angular2. Hasta aquí todo bien, pero en este momento estamos enfrentando un problema. En este punto, ¿cuál es el enfoque adecuado para i18n para Angular2? Investigamos un poco y encontramos esto:
Sin embargo, el último compromiso tiene más de 5 meses de antigüedad ... No parece un desarrollo activo.
¿Alguien intentó usar angular-translate o angular-gettext? ¿O tal vez con Angular2 es mejor ajustar algo JS como i18next? ¿Alguien podría compartir sus pensamientos? Tal vez enfrentaste el mismo problema?
Encontré otra manera de implementar esto usando pipe
y service
HTML
<!-- should display ''hola mundo'' when translate to Spanish -->
<p>{{ ''hello world'' | translate }}</p>
MECANOGRAFIADO
...
// "this.translate" is our translate service
this.translate.use(''es''); // use spanish
...
// should display ''hola mundo'' when translated to Spanish
this.translatedText = this.translate.instant(''hello world'');
...
https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1 https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-2
Estoy armando un POC y la documentación oficial es engorrosa, por decir lo menos, así que probé ngx-translate http://www.ngx-translate.com/ y literalmente tuve el mundo hello funcionando en pocos minutos, hay algunas advertencias:
- He leído acerca de gente quejándose sobre el rendimiento, debido a las tuberías, pero al leer los problemas de Github, parece que se está resolviendo
- Solo para i18n o Translations no trata con i10n o Localization
- Hay pocos errores de advertencia con Angular4 pero funciona de todos modos
En resumen, me gustó ngx-translate si tienes una aplicación pequeña y solo necesitas traducción
Yo personalmente quería la localización, así que estoy viendo https://github.com/robisim74/angular-l10n . Se ve bastante bien, pero no lo he probado, así que te lo haré saber más tarde, o ustedes pueden ir y todos lo intentamos
Hay un soporte oficial para i18n en Angular.io aquí:
https://angular.io/docs/ts/latest/cookbook/i18n.html
¡Pero! Como se menciona en los documentos:
¡Debe compilar e implementar una versión separada de la aplicación para cada idioma compatible!
Eso hace que esta característica sea inútil en la mayoría de los casos ...
A menos que lo use sin CLI como se describe aquí:
https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/
Plunk se actualizó a Angular 2 Final : https://plnkr.co/edit/4euRQQ . Las cosas parecen funcionar igual que en RC7.
Se ha agregado una nueva sección i18n a los documentos oficiales de Angular 2. Básicamente, explica en detalle lo que sucede en el plunkr anterior.
XLIFF es el único formato para traducciones, sin soporte json . Se debe crear un archivo fuente de traducción (xliff, xlf) utilizando la herramienta ng-xi18n :
package.json :
"scripts": {
"i18n": "ng-xi18n",
...
}
y
npm run i18n
Consulte la sección de traducción de Merge para obtener detalles sobre la fusión de una traducción en una plantilla de componente. Se hace usando el complemento de texto SystemJS .
Otro ejemplo usando Gulp http://www.savethecode.com/angular2-i18n-native-support/
Personal anterior : actualización basada en RC7 y enlaces proporcionados por Herman Fransen :
He hecho un ejemplo mínimo de Plunkr: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM
Comentarios a la plunkr:
-
bootstrap
debe proporcionarTRANSLATIONS
,TRANSLATIONS_FORMAT
,LOCALE_ID
con valores -> setup translations - los elementos traducibles en html-templates deben usar la directiva
i18n
- las traducciones se almacenan en el archivo
.xlf
. Los enlaces entre idiomas se realizan a través deId
, se vincula con html por un valor de etiqueta<source>
enxlf
- actualmente los archivos
xlf
no se usan directamente; un archivo.ts
se crea manualmente para envolver el contenido dexlf
en una variable exportable. Supongo que esto debería funcionar automágicamente en la versión final (tal vez incluso ahora).
Este es el primer enfoque oficialmente documentado que encontré. Sin embargo, todavía es apenas utilizable. Veo los siguientes problemas en la implementación actual:
- El idioma está configurado en el
bootstrap
, no se puede cambiar en tiempo de ejecución. Esto debería cambiarse en Final. - Id de un elemento traducible en
xlf
se genera SHA. La forma actual de obtener esta identificación es un poco desordenada: crea un nuevo elemento traducible,i18n.lang.xlf
, copie SHA id del error y pegue en su archivoi18n.lang.xlf
.
Hay una gran solicitud de extracción de documentación sobre i18n
Personal de más edad : notas de la versión https://github.com/angular/angular/blob/master/CHANGELOG.md tienen un registro
i18n : fusionar traducciones 7a8ef1e
Una gran parte de i18n se introdujo en Angular 2 RC5
Desafortunadamente, todavía no hay documentación disponible.
Todos están ansiosos por la implementación oficial, pero esta funcionó para mi caso de uso: ng2-translate
README es bastante minucioso, y si necesita algo realmente particular (para mí fue la división de código), el código en sí no es demasiado largo o difícil de leer.