Cómo utilizar ngx-translate con Angular

Introducción

En algún momento, su aplicación web puede requerir atender a una base de usuarios multilingües. La internacionalización , o i18n para abreviar, es el proceso mediante el cual hace que su aplicación sea utilizable para aquellos que tienen un idioma nativo diferente.

Si bien Angular tiene algunas funciones i18n incorporadas, ngx-translatees un paquete de terceros que ofrece algunas funciones que podrían ser más adecuadas para su caso de uso.

En este artículo lo usarás ngx-translateen una aplicación Angular.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Node.js instalado localmente, lo cual puedes hacer siguiendo Cómo instalar Node.js y crear un entorno de desarrollo local .
• Algunos conocimientos sobre la configuración de un proyecto Angular .

Este tutorial fue verificado con Node v16.4.0, npmv7.19.0, @angular/corev12.1.0, @ngx-translate/corev13.0.0 y @ngx-translate/http-loaderv6.0.0.

Configuración del proyecto

Cree una nueva aplicación Angular y agregue algunas dependencias.

Abra su terminal y use @angular/clipara crear un nuevo proyecto:

ng new angular-ngx-translate-example --skip-tests

A continuación navegue hasta el directorio del proyecto recién creado:

cd angular-ngx-translate-example

A continuación, ejecute el siguiente comando para agregar el paquete a su aplicación:

npm install @ngx-translate/core@13.0.0

Ahora importe el archivo TranslateModuleen su AppModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { TranslateModule } from '@ngx-translate/core';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    TranslateModule.forRoot()  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Esto proporcionará acceso al núcleo del servicio de traducción, la canalización y las directivas.

Sin embargo, a menos que planee agregar manualmente cada traducción usted mismo a través del código, probablemente desee agregar un poco de configuración en esta etapa para que la carga de sus traducciones sea un poco más fácil.

UsandoTraslateHttpLoader

Probablemente, la forma más común de cargar traducciones es incluir los archivos de traducción como activos y cargarlos a través de TranslateHttpLoader, que está disponible en un paquete npm separado.

npm install @ngx-translate/http-loader@6.0.0

Ahora importe el archivo TranslateHttpLoaderen su AppModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { HttpClientModule, HttpClient } from '@angular/common/http';import { TranslateModule, TranslateLoader } from '@ngx-translate/core';import { TranslateHttpLoader } from '@ngx-translate/http-loader';import { AppComponent } from './app.component';// AoT requires an exported function for factoriesexport function HttpLoaderFactory(http: HttpClient) {  return new TranslateHttpLoader(http);}@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule,    HttpClientModule,    TranslateModule.forRoot({      loader: {        provide: TranslateLoader,          useFactory: HttpLoaderFactory,          deps: [HttpClient]      }    })  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

Tienes la libertad de crear tu propio cargador. Deberás implementar la TranslateLoaderinterfaz y proporcionarla en tu módulo como se indica más arriba.

Uso de archivos de traducción

Para crear el cargador de traducción de esta manera, se espera que tengas un archivo en tu proyecto en una /assets/i18n/carpeta llamada {lang}.json, donde {lang}es el idioma del archivo que estás usando para las traducciones. Para inglés, este archivo puede ser en.json, por ejemplo.

Puede cambiar la ruta y la extensión de archivo predeterminadas proporcionando parámetros adicionales al new TranslateHttpLoader()constructor.

El archivo de traducción es un objeto JSON de pares clave-valor, donde la clave describe el texto que se traduce y el valor es el texto real en el idioma especificado por el archivo.

src/assets/i18n/es.json

{  "welcomeMessage": "Thanks for joining, {{ firstName }}! It's great to have you!",  "login": {    "username": "Enter your user name",    "password": "Password here"  }}

El valor también puede ser otro objeto, lo que le permite agrupar sus traducciones como desee.

En el texto de su valor de traducción, también puede incluir llaves dobles alrededor del nombre de una variable, lo que luego le permitirá interpolar cadenas dinámicamente en sus traducciones.

Acceder a las traducciones

Antes de poder acceder a estas traducciones en su aplicación, debe inicializar algunas propiedades en el TranslateService.

Probablemente el mejor lugar para hacer esto es en tu bootstrap AppComponent.

src/app/app.component.ts

import { Component } from '@angular/core';import { TranslateService } from '@ngx-translate/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  constructor(translate: TranslateService) {    translate.addLangs(['en', 'klingon']);    translate.setDefaultLang('en');    translate.use('en');  }}

Primero, translate.addLangs([])le dice al servicio qué idiomas están disponibles para usar en las traducciones.

El método translate.setDefaultLang('en')le permite especificar un conjunto de traducciones de respaldo para usar en caso de que falten traducciones para el idioma actual.

translate.use('en')Le dice al servicio cuál es el idioma actual a utilizar para las traducciones.

El parámetro para todos estos es el idioma del que desea extraer las traducciones: deben coincidir con los nombres de los archivos JSON que definen las traducciones para esos idiomas.

Con esa configuración, tienes tres formas de acceder a las traducciones. La que uses en cada momento dependerá de tus necesidades y preferencias.

UsandoTranslateService

Al utilizar este servicio, existen dos métodos para obtener sus traducciones.

El primer método, y el recomendado, es utilizar:

get(key: string|Arraystring, interpolateParams?: Object)`

Esto devuelve un Observable y, como tal, es asincrónico, lo que garantiza que el archivo de traducción se cargará antes de usar el valor. Este Observable se completa tan pronto como se recupera el valor.

El segundo método es utilizar:

instant(key: string|Arraystring, interpolateParams?: Object)`

Este método es sincrónico. Si el archivo de traducción no ha terminado de cargarse en el momento en que utilices este método, no obtendrás ninguna traducción.

Recuerde que le indicamos al servicio que use enel idioma actual, por lo que todos los resultados de la traducción provendrán del en.jsonidioma inicial.

src/app/app.component.ts

import { Component } from '@angular/core';import { TranslateService } from '@ngx-translate/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  user!: { firstName: string; lastName: string; };  welcome!: string;  usernameLabel!: string;  passwordLabel!: string;  constructor(translate: TranslateService) {    translate.addLangs(['en', 'klingon']);    translate.setDefaultLang('en');    translate.use('en');  }  ngOnInit() {    // hardcoded example    this.user = { firstName: 'Sammy', lastName: 'Shark' };    // synchronous. Also interpolate the 'firstName' parameter with a value.    this.welcome = this.translate.instant('welcomeMessage', { firstName: this.user.firstName });    // asynchronous - gets translations then completes.    this.translate.get(['login.username', 'login.password'])      .subscribe(translations = {        this.usernameLabel = translations['login.username'];        this.passwordLabel = translations['login.password'];      });  }}

Puede implementar su propio método en su aplicación para cambiar entre idiomas, ya sea a través de un cuadro de selección, una ruta URL o algún otro método, llame al use(lang: string)método para TranslateServiceestablecer el idioma actual.

UsandoTranslatePipe

Puedes usar la tubería de traducción de la misma forma que usarías cualquier otra tubería en Angular. La entrada en la tubería es la clave de la traducción que necesitas. El parámetro opcional es un objeto que define las cadenas de interpolación que espera la traducción.

En el siguiente ejemplo, el componente tiene un userobjeto, con una propiedad de firstName:

src/aplicación/aplicación.componente.html

p{{ 'welcomeMessage' | translate: user }}/p

Este código producirá un mensaje de: "Thanks for joining, Sammy! It's great to have you!".

Esto coincide con la interpolación que se espera para el valor de welcomeMessage.

src/aplicación/aplicación.componente.html

input type="password" placeholder="{{ 'login.password' | translate }}"

Este código producirá una entrada con un marcador de posición de: "Password here".

UsandoTranslateDirective

También puedes colocar una directiva en cualquier elemento HTML para obtener traducciones.

Hay un par de formas diferentes de hacer esto.

src/aplicación/aplicación.componente.html

label translate='login.username'/label

Este código producirá una etiqueta de: "Enter your user name".

También puede establecer la clave de la traducción como el contenido del elemento.

src/aplicación/aplicación.componente.html

p translate [translateParams]="{ firstName: user.firstName }"welcomeMessage/p

Este código producirá un mensaje de: "Thanks for joining, Sammy! It's great to have you!".

Conclusión

En este artículo lo usaste ngx-translateen una aplicación Angular.

Continúe su aprendizaje leyendo sobre el soporte i18n integrado en Angular .