随着全球化的需求增加，开发多语言网站已经成为前端开发的常规工作。ngx-translate 是 Angular 2+ 官方的翻译库，可以实现网站的多语言支持。ngx-translate-extract 是这个库官方的子模块，能够提取项目中的所有翻译文本，方便进行翻译管理。在本篇文章中，我们将详细讲解如何使用 ngx-translate-extract 来优化项目中的翻译管理。
安装 ngx-translate-extract
我们可以使用 npm 命令来安装 ngx-translate-extract：
--- ------- --------------------- ----------
创建翻译文件
在我们开始使用 ngx-translate-extract 之前，我们需要创建一个翻译文件，用于存储所有的翻译文本。在 Angular 项目中，我们可以在 src/assets/i18n 目录下创建一个名为 messages.xlf 的文件。这个文件中将包含所有已翻译文本的翻译记录。
提取翻译文本
我们将使用 ngx-translate-extract 提取项目中的所有翻译文本，并将其保存在翻译文件中。请按照以下步骤执行：
1. 在 tsconfig.json 文件中配置
将 "noImplicitUseStrict": true 添加到 tsconfig.json 文件中。
例如：
-
------------------ -
---------------------- -----
--------- ------
--------- ---------
---
--
---
-2. 在 package.json 文件中添加脚本
在 package.json 文件的 scripts 标签中添加以下脚本：
---------- -
---
--------------- --- ----- ------------- ----------------
--3. 运行脚本
在命令行中运行以下命令，以提取翻译文本：
--- --- ------------
提取后的文本将被写入 src/assets/i18n/messages.xlf 文件。
使用翻译文本
在用 ngx-translate 实现翻译时，需要先引入 TranslateModule.forRoot()，并在 app.module.ts 中进行导入，例如：
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------
-----------
---
-------- -
---
-------------------------
------- -
-------- ----------------
----------- ------------------
----- ------------
-
---
---
--
---
--
------ ----- --------- --
------ -------- ----------------------- ----------- -
------ --- --------------------------
-现在我们可以在组件中使用翻译文本了。
例如，在以下组件中，我们将会使用翻译之后的 "Hello World"：
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
----- - -----------------------------
------------------- ---------- ----------------- -
-------------------------------
--------------------
-
-示例代码：
------ ------------- - --------- -------
总结
使用 ngx-translate-extract 可以帮助我们快速完成 Angular 项目中的翻译管理。使用提取、管理、导出的方式更加灵活，增加了维护性与扩展性。希望这篇文章对您有所帮助，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005587881e8991b448d5b8e