Angular中如何通过启动脚本参数切换ngx-translate的JSON文本源

当然可以通过启动脚本或传入参数来切换ngx-translate读取的JSON文件，下面是具体实现方式：

1. 配置基础环境变量 #

在Angular的environment.ts及对应环境文件（如environment.prod.ts）中定义基础配置：

// environment.ts
export const environment = {
  production: false,
  defaultLang: 'en',
  langAssetsBasePath: './assets/i18n/'
};

2. 添加带参数的启动脚本 #

在package.json的scripts字段中新增带参数的启动命令，比如：

"scripts": {
  "start": "ng serve",
  "start:zh": "ng serve --env-lang=zh-CN",
  "start:jp": "ng serve --env-lang=ja-JP"
}

3. 动态读取参数加载语言文件 #

在app.module.ts中，借助APP_INITIALIZER在应用初始化时解析命令行参数，动态指定要加载的语言文件：

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

// 解析命令行中的语言参数
function getTargetLang(): string {
  const args = process.argv.slice(2);
  const langArg = args.find(item => item.startsWith('--env-lang='));
  return langArg ? langArg.split('=')[1] : environment.defaultLang;
}

export function createTranslateLoader(http: HttpClient) {
  const targetLang = getTargetLang();
  return new TranslateHttpLoader(http, environment.langAssetsBasePath, `.${targetLang}.json`);
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule { }

4. 匹配语言文件命名规则 #

确保你的语言文件命名和参数对应，比如：

• assets/i18n/en.json（英文文件）
• assets/i18n/zh-CN.json（中文文件）
• assets/i18n/ja-JP.json（日文文件）

执行npm run start:zh就会加载中文语言文件，执行默认npm start则加载英文文件。

你也可以通过angular.json定义不同环境的语言配置，启动时用--configuration指定环境，本质也是通过环境变量传递语言标识，实现同样的效果。

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