C贸mo localizar aplicaciones Angular usando RxWeb

Traducci贸n a Espa帽ol de un art铆culo en Ingl茅s de Ushmi Dave explicando c贸mo localizar / internacionalizar / traducir aplicaciones en Angular, usando RxWeb

angularlocalizacion de aplicacionesrxweb
Traduccion de aplicaciones Angular usando RxWeb 7 junio, 2021 Traduccion de aplicaciones Angular usando RxWeb
Traduccion de aplicaciones Angular usando RxWeb
7 junio, 2021 Traduccion de aplicaciones Angular usando RxWeb

Aprende a internacionalizar / localizar aplicaciones Angular usando RxWeb para generar traducciones, un m贸dulo de c贸digo simple, f谩cil de mantener, que permite lazy load, traducci贸n por URL o por c贸digo, traducci贸n de mensajes de error FormControl, extracci贸n de claves, optimizaci贸n de JSON, etc.

Texto original de Ushmi Dave, publicado el 19/19/2020 en
https://medium.com/hci-design-at-uw/there-is-no-blue-in-korean-ea6ac0d25d34

 

* * *

RxWeb Translate: una forma elegante de localizar / internacionalizar aplicaciones Angular

La localizaci贸n en una aplicaci贸n angular puede aumentar su eficiencia para resolver los problemas de negocio, ya que ayuda a que el software se vincule a las personas a trav茅s de su localidad o idioma.

Las aplicaciones traducidas tienen la capacidad de centrarse en los usuarios que tienen diferentes idiomas, culturas y lugares. En este art铆culo voy a discutir la implementaci贸n de la internacionalizaci贸n en aplicaciones Angular utilizando @rxweb/translate.

Indice

  1. C贸mo garantizar Mantenibilidad y Consistencia
  2. Mantener separados c贸digo fuente / hilos de traducci贸n
  3. Resolver de forma global datos traducidos, establecer el idioma por defecto y a帽adir idiomas
  4. Seguir las pr谩cticas y normas de codificaci贸n correctas

Inicio

Empieza por instalar el paquete:

npm install @rxweb/translate

C贸mo registrar el m贸dulo

Importa el Translate generado en app.module.ts como se indica a continuaci贸n:

Para registrar el m贸dulo en la aplicaci贸n, importa TranslateModule y tambi茅n wellapp.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { RxWebModule } from './rxweb.module';

@NgModule({
declarations: [
    AppComponent
  ],
imports: [
    BrowserModule,
    AppRoutingModule,
     RxTranslateModule.forRoot({ 
      cacheLanguageWiseObject: true,
      globalFilePath: "assets/i18n/{{language-code}}/global.{{language-code}}.json",
     filePath: "assets/i18n/{language-code}}/translation-name}}.{{language-code}}.json"})
  ],
providers: [RxTranslateModule],
exports: [RxTranslateModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

El archivo RxTranslateModule contiene propiedades cuyo uso se explica a continuaci贸n:

  1. cacheLanguageWiseObject : Escoge true para mantener cacheadas las claves de traducci贸n y aumentar as铆 el rendimiento.
  2. globalFilePat: Define el archivo de traducci贸n global para resolver los objetos de traducci贸n global por componentes, por ejemplo: para en (global.en.json)
  3. filePath : Establece la ruta del archivo para resolver los objetos de traducci贸n en cada m贸dulo con respecto a su nombre de traducci贸n, por ejemplo: para login(login.en.json)

C贸mo resolver Datos Globales de Traducci贸n :

En el componente de la aplicaci贸n, resuelve @translate para obtener los datos globales traducidos

app.component.ts:

import { Component } from '@angular/core';
import { translate } from '@rxweb/translate';
@Componente({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   @translate() global: any;
}

Vincula el texto :

Vincula el texto basado en el objeto resuelto en el componente de la aplicaci贸n, utilizando la vinculaci贸n de dos v铆as (Interpolaci贸n) de angular

app.component.html:

{{global.Title}}

Forma el Json :

Los objetos de traducci贸n se resuelven a partir de la ruta del archivo global. La estructura de los archivos json es la siguiente:

Puedes generar el json en los archivos como claves basadas en el contenido multiling眉e que desees. Si, por ejemplo, que est谩s traduciendo tu contenido a 2 idiomas (en y fr), entonces el t铆tulo generar铆a as铆:

Json Keys

Traducci贸n:

Output

Este es el resultado del c贸digo anterior. Puedes ver un ejemplo b谩sico completo en stackblitz

C贸mo resolver Datos de Traducci贸n basados en Componentes:

En el componente resuelve el objeto @translate para obtener los datos traducidos basados en el nombre de la traducci贸n. Aqu铆 hay un ejemplo de un componente de inicio de sesi贸n, por lo que aqu铆 el nombre de la traducci贸n ser谩 login

login.component.ts

import { Component, OnInit } from '@angular/core';
import { translate, RxTranslation } from '@rxweb/translate';
@Componente({
  selector: 'app-login-component',
  templateUrl: './componente-de-inicio-de-sesi贸n.component.html',
  styleUrls: ['./componente-de-inicio-de-sesi贸n.componente.css']
})
export class LoginComponent implements OnInit {
  @translate({translationName:'login'}) login: any;
  constructor(){
  }
}

Vincula el texto:

Vincula el texto basado en el objeto resuelto en el componente de inicio de sesi贸n, de la misma manera que la traducci贸n global, utilizando el objeto de inicio de sesi贸n.

app.component.html:

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">{{login.emailLabel}}</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">{{login.emailNoteText}}</small>
    </div> <div>
    <div class="form-group">
        <label for="exampleInputPassword1">{{login.passwordLabel}}</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div> <div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">{{login.checkOutText}}</label>
    </div> <div>
    <button type="submit" class="btn btn-primary">{{login.submitText}}</button>
</form>

Forma el Json:

Los objetos de traducci贸n se resuelven a partir de la ruta del archivo. La estructura de los archivos json es la siguiente:

Forma el json en los archivos como las claves basadas en el contenido multiling眉e que deseas. Si, por ejemplo, est谩s traduciendo tu contenido a 2 idiomas (en y fr), entonces el t铆tulo se formar铆a as铆:

Traducci贸n:

A continuaci贸n se muestra la salida del componente de inicio de sesi贸n:

Caracter铆sticas

  • C贸digo de traducci贸n simple, mantenible y legible.
  • Carga perezosa (lazyload) del contenido del componente de traducci贸n con Angular PreLoadModule.
  • Traducci贸n de idiomas por URL o por c贸digo.
  • Traducci贸n de mensajes de error FormControl.
  • Potente CLI con las caracter铆sticas de Extracci贸n de Claves, Optimizaci贸n de JSON, etc.

Averigua c贸mo implementar todas las caracter铆sticas de rxweb translate en:docs

Valora este art铆culo

Articulos relacionados


Traducci贸n de Ingl茅s a Espa帽ol de un texto de Alan Third que explica c贸mo funcionan las fuentes en Emacs y como trabajar con idiomas especiales: fuente por defecto, fuentes de reserva, fuentes para otros idiomas, etc

Traducci贸n del Ingl茅s al Espa帽ol de un art铆culo escrito por Justin Searls, programador interesado en la productividad, que reflexiona aqu铆 acerca de c贸mo sacarle el m谩ximo partido al hardware y software de Apple y en concreto a su iPad Pro de 10,5鈥. Descubre todas las funciones y...

Traducci贸n de un art铆culo e Risa Fujii sobre traduccion e internacionalizacion de sitios web y apps basadas en Rails: "The Basics of Rails I18n - Translate errors, models, and attributes". C贸mo traducir mensajes de error, modelos, atributos, etc. Un articulo de Risa Fujii publicado en...