在前端开发中，国际化是一个十分重要的部分。而 ngx-translate 是一个非常流行的 Angular 国际化插件。在 ngx-translate 中，我们通常需要在 ts 文件中使用一些特定的方法和参数来实现翻译。但是，如果我们需要将翻译提取出来以便进行翻译和管理，手动处理将会非常困难。
因此，在这里我想介绍一个非常好用的 npm 包：@flavienb/ngx-translate-extract，它可以自动将项目中的翻译提取出来，保存为 JSON 文件，以便更方便的进行翻译和管理。
安装
首先，我们需要先安装该包，通过以下命令即可：
npm install @flavienb/ngx-translate-extract --save-dev
使用
安装完成后，我们可以在项目中使用该包。以下是该包的用法：
在 HTML 中使用
先在 HTML 中添加 translate 指令来使用 ngx-translate：
<div translate> Hello! </div>
这样，我们就需要在对应的 component.ts 文件中使用 TranslateService 来翻译该字符串。
提取翻译
运行以下命令来提取翻译：
ngx-translate-extract --input=./**/*.ts --output=./src/assets/i18n/template.json --clean --sort
其中，--input 参数指定了要提取的文件路径；--output 参数指定了保存的路径；--clean 参数用来指定清除旧的翻译信息；--sort 参数用来指定按照键的顺序进行排序。
命令完成后，会在指定的 output 文件中生成一个 JSON 文件，内容为：
{
"Hello!": "",
}进行翻译
我们可以将生成的 JSON 文件交给翻译人员进行翻译。
在翻译完成后，我们将翻译信息填入对应的值中。例如：
{
"Hello!": "你好！",
}在项目中加载翻译
将翻译文件保存在 /assets/i18n/zh-CN.json 文件中。我们可以使用如下代码加载该文件：
import { TranslateService } from '@ngx-translate/core';
constructor(private translateService: TranslateService) {
this.translateService.setDefaultLang('zh-CN');
this.translateService.use('zh-CN');
}之后，我们就可以在 HTML 文件中使用翻译了。例如：
<div translate> Hello! </div>
将被翻译为：
<div> 你好！ </div>
总结
通过使用 @flavienb/ngx-translate-extract，我们可以方便的将翻译提取出来以便管理。希望这篇文章能帮助到正在学习 ngx-translate 的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572fa81e8991b448e9235