JHipster应用：为懒加载功能模块添加国际化支持

嘿，我之前在JHipster项目里折腾过懒加载模块的国际化支持，结合社区里的讨论和实践，整理了一套可行的方案，你可以参考下：

这种方式让每个懒加载模块拥有独立的翻译服务实例和专属翻译文件，真正实现翻译资源的按需加载，还能避免全局翻译键冲突。

步骤1：为懒加载模块创建独立翻译文件 #

在你的懒加载模块目录下新建i18n文件夹，存放对应语言的翻译文件，比如：

src/main/webapp/app/your-lazy-module/
├── i18n/
│   ├── en.json
│   ├── zh-cn.json
│   └── ...（其他语言文件）
├── your-lazy-module.module.ts
└── ...（组件文件）

翻译文件里只放该模块专属的键值对，比如en.json：

{
  "lazyModule": {
    "title": "My Lazy Module",
    "description": "This is a lazy-loaded module with i18n support"
  }
}

步骤2：配置懒加载模块的TranslateModule #

在模块的*.module.ts文件中，导入TranslateModule并使用forChild()方法配置独立的加载器和隔离模式：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

// 自定义翻译加载器，指向当前模块的i18n目录
export function createLazyTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './app/your-lazy-module/i18n/', '.json');
}

@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: createLazyTranslateLoader,
        deps: [HttpClient]
      },
      isolate: true // 开启隔离模式，让模块拥有独立的翻译服务实例
    })
    // 其他必要模块导入
  ],
  declarations: [/* 你的组件列表 */]
})
export class YourLazyModuleModule { }

步骤3：在组件中使用翻译 #

和全局国际化用法一致，直接用translate管道或TranslateService：

• 模板中使用管道：

<h1>{{ 'lazyModule.title' | translate }}</h1>
<p>{{ 'lazyModule.description' | translate }}</p>

• 组件类中使用服务：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'jhi-your-lazy-component',
  templateUrl: './your-lazy-component.component.html'
})
export class YourLazyComponentComponent implements OnInit {
  description: string;

  constructor(private translateService: TranslateService) { }

  ngOnInit(): void {
    this.translateService.get('lazyModule.description').subscribe(res => {
      this.description = res;
    });
  }
}

步骤4：同步全局语言切换 #

因为模块的翻译服务是隔离的，全局切换语言时需要同步更新模块的语言设置。可以通过全局服务广播语言变化：

1. 创建全局语言服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LanguageSyncService {
  languageUpdated = new Subject<string>();

  broadcastLanguageChange(lang: string): void {
    this.languageUpdated.next(lang);
  }
}

2. 在全局语言切换组件中调用广播：

// 比如在JHipster默认的LanguageComponent中
import { LanguageSyncService } from 'app/core/language-sync/language-sync.service';

constructor(
  private translateService: TranslateService,
  private languageSyncService: LanguageSyncService
) { }

changeLanguage(langKey: string): void {
  this.translateService.use(langKey);
  this.languageSyncService.broadcastLanguageChange(langKey);
}

3. 在懒加载模块的组件中订阅语言变化：

import { LanguageSyncService } from 'app/core/language-sync/language-sync.service';

constructor(
  private translateService: TranslateService,
  private languageSyncService: LanguageSyncService
) {
  this.languageSyncService.languageUpdated.subscribe(lang => {
    this.translateService.use(lang);
  });
}

如果不需要懒加载翻译资源，可以把模块的翻译文件合并到全局加载流程中，但这样会失去懒加载的优势：

1. 安装@ngx-translate/multi-http-loader来加载多个翻译文件：

npm install @ngx-translate/multi-http-loader --save

2. 修改全局的TranslateLoader配置（通常在SharedModule或AppModule中）：

import { MultiTranslateHttpLoader } from '@ngx-translate/multi-http-loader';

export function createTranslateLoader(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: './i18n/', suffix: '.json' }, // 全局翻译文件
    { prefix: './app/your-lazy-module/i18n/', suffix: '.json' }, // 懒加载模块翻译文件
    // 其他模块的翻译文件
  ]);
}

3. 懒加载模块只需导入全局的TranslateModule即可，无需单独配置。

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