angular 多个国际化文件内容合并

angular 多个国际化文件内容合并

项目比较大的时候，为了支持多用户开发而不进行相互干扰。一般是一个业务模块创建一个国际化文件。国际化文件一般会放在assets/i18n/目录下，所以经常会看到这个目录下有 cn_a.json，en_a.json，cn_b.json，en_b.json。但是需要在项目启动前合并这些json文件到一个cn.son和en.json中。
思路就是
1.创建一个merge-i18n.js文件，如果不存在cn.son和en.json这两个文件，就创建这两个文件，如果存在就清空这两个文件的内容，然后读取assets/i18n/目录下所有以cn_或en_开头.json结尾的文件。把这些文件的内容都写到cn.json或en.json文件中去。

const fs = require('fs');
const path = require('path');

const i18nDir = path.join(__dirname, 'src/assets', 'i18n');
['en', 'cn'].forEach(file_prefix => {
    const jsonPath = path.join(i18nDir, file_prefix + '.json');
    fs.writeFileSync(jsonPath, '{}');
    let json = {};
    fs.readdirSync(i18nDir)
        .filter(file => file.startsWith(file_prefix + '_') && file.endsWith('.json'))
        .forEach(file => {
            const filePath = path.join(i18nDir, file);
            const fileContent = JSON.parse(fs.readFileSync(filePath, 'utf8'));
            json = { ...json, ...fileContent };
        });

    fs.writeFileSync(jsonPath, JSON.stringify(json, null, 2));
})

2.在package.json文件中新增一个命令"merge-i18n": “node merge-i18n.js”,然后在 server或者start命令之前,执行npm run merge-i18n。

这里需要注意的地方就是，一般为了避免合并后的内容出现key重复的情况，一般就是自己写的国际化文件最好都在外面再包一层。比如cn_xx.json中。

{
“xx”: {
//这里才是业务的国际化的内容
}
}

国际化的配置

1.app.module.ts中配置

export function HttpLoaderFactory(httpClient: HttpClient) {
	return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
}

TranslateModule.forRoot({
			loader: {
				provide: TranslateLoader,
				useFactory: HttpLoaderFactory,
				deps: [HttpClient],
			},
		}),

2.在app组件中，需要确定语言后，然后把语言存到sessionstorage或者localstorage中。

this.currentLanguage: 'en' | 'cn' = 'en';
this.translate.setDefaultLang(this.currentLanguage);
this.translate.use(this.currentLanguage);
sessionStorage.setItem("DefaultLang", this.currentLanguage);