Angular中如何通过ngx-translate实现JHipster式多JSON分语言翻译配置

你可以通过自定义TranslateLoader完全控制翻译文件的加载路径，无需适配第三方loader的固定路径规则，具体实现如下：

步骤1：实现自定义Http加载器 #

创建自定义加载器类，按assets/i18n/{{语言编码}}/{{模块名}}.json规则拼接请求路径，同时支持加载多模块翻译文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { forkJoin, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 列出项目所有需要加载的翻译模块名，对应各个json文件的前缀
const TRANSLATION_MODULES = ['core', 'user', 'dashboard', 'setting'];

@Injectable()
export class JhipsterTranslateLoader implements TranslateLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    // 批量请求当前语言下所有模块的翻译文件
    const requests = TRANSLATION_MODULES.map(module => 
      this.http.get(`/assets/i18n/${lang}/${module}.json`)
    );
    // 合并所有模块的翻译对象为一个总对象
    return forkJoin(requests).pipe(
      map(responses => responses.reduce((acc, cur) => ({...acc, ...cur}), {}))
    );
  }
}

步骤2：在根模块配置ngx-translate使用自定义加载器 #

修改AppModule中ngx-translate的初始化配置，替换默认加载器：

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 { JhipsterTranslateLoader } from './jhipster-translate.loader';
import { AppComponent } from './app.component';

// 自定义加载器工厂函数
export function createTranslateLoader(http: HttpClient) {
  return new JhipsterTranslateLoader(http);
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      defaultLanguage: 'pt-br' // 配置主语言为巴西葡萄牙语
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：懒加载模块按需加载翻译（可选优化） #

如果项目存在懒加载模块，可在对应懒加载模块中单独加载该模块的翻译文件，避免根模块一次性加载所有翻译：

// 懒加载模块的配置示例
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { OrderRoutingModule } from './order-routing.module';
import { OrderComponent } from './order.component';

@NgModule({
  imports: [CommonModule, OrderRoutingModule],
  declarations: [OrderComponent]
})
export class OrderModule {
  constructor(private translate: TranslateService) {
    const currentLang = this.translate.currentLang || this.translate.defaultLang;
    // 加载当前语言下订单模块的翻译文件，合并到现有翻译中
    this.translate.getTranslation(currentLang).subscribe(existing => {
      import(`/assets/i18n/${currentLang}/order.json`).then(orderTrans => {
        this.translate.setTranslation(currentLang, {...existing, ...orderTrans}, true);
      });
    });
  }
}

配置完成后，ngx-translate会自动按照你需要的路径规则加载翻译文件，完全适配JHipster的翻译目录规范。

内容的提问来源于stack exchange，提问作者Kiporman