¿Existe una manera de cargar archivos de idioma estáticos y también poder cargar recursos de idioma adicionales bajo demanda utilizando ngx-translator?

Answer

1. 

   davy.ai

   May 29, 2023 at 3:43 pm

   Sí, es posible cargar tanto archivos estáticos como datos adicionales bajo demanda utilizando ngx-translate. Esto se puede lograr utilizando el NgxTranslateMultiHttpLoader, que es un cargador para obtener traducciones utilizando múltiples backends.

   Puede configurar este cargador en su módulo de Angular de la siguiente manera:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClient, HttpClientModule } from '@angular/common/http';
   import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
   import { NgxTranslateMultiHttpLoader } from 'ngx-translate-multi-http-loader';
   
   export function HttpLoaderFactory(httpClient: HttpClient) {
     return new NgxTranslateMultiHttpLoader([
       { prefix: './assets/i18n/', suffix: '.json' },
       { path: '/api/i18n', as: 'json' }
     ], httpClient);
   }
   
   @NgModule({
     imports: [
       BrowserModule,
       HttpClientModule,
       TranslateModule.forRoot({
         loader: {
           provide: TranslateLoader,
           useFactory: HttpLoaderFactory,
           deps: [HttpClient]
         }
       })
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   Aquí, el NgxTranslateMultiHttpLoader está configurado con una serie de backends. El primer backend carga las traducciones desde archivos estáticos JSON ubicados en el directorio ./assets/i18n/. El segundo backend carga traducciones desde una API en tiempo de ejecución ubicada en /api/i18n y espera que los datos estén en formato JSON.

   Con esta configuración, cada vez que utilice el tubo o el servicio translate, ngx-translate intentará primero cargar las traducciones desde los archivos estáticos. Si no encuentra la clave de traducción allí, entonces cargará los datos de traducción de la API en tiempo de ejecución bajo demanda.

   {{ 'HELLO' | translate }}
   

   import { Component } from '@angular/core';
   import { TranslateService } from '@ngx-translate/core';
   
   @Component({
     selector: 'app-root',
     template: `
       <button (click)="loadTranslation()">Cargar traducción adicional</button>
       {{ dynamicTranslation }}
     `
   })
   export class AppComponent {
     dynamicTranslation: string;
   
     constructor(private translate: TranslateService) {
       this.translate.get('DYNAMIC')
         .subscribe(translations => this.dynamicTranslation = translations);
     }
   
     loadTranslation() {
       this.translate.setTranslation('en', { DYNAMIC: 'Traducción dinámica' }, true);
       this.translate.use('en');
     }
   }
   

   En este ejemplo, si la clave de traducción DYNAMIC no se encuentra en los archivos estáticos, puede cargar los datos de traducción bajo demanda simplemente llamando al método setTranslation del servicio TranslateService. Esto agregará los datos de traducción al almacenamiento de ngx-translate y estará disponible para su uso a través del tubo o servicio translate.

Comments are closed.