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
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 en Medium
***
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
Empieza por instalar el paquete:
npm install @rxweb/translate
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:
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 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}}
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í:
Este es el resultado del código anterior. Puedes ver un ejemplo básico completo en stackblitz
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 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>
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í:
A continuación se muestra la salida del componente de inicio de sesión:
Averigua cómo implementar todas las características de rxweb translate en:docs
Articulos relacionados
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
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
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...