NPM 包 ngx-translate-extract 使用教程-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的需求增加，开发多语言网站已经成为前端开发的常规工作。ngx-translate 是 Angular 2+ 官方的翻译库，可以实现网站的多语言支持。ngx-translate-extract 是这个库官方的子模块，能够提取项目中的所有翻译文本，方便进行翻译管理。在本篇文章中，我们将详细讲解如何使用 ngx-translate-extract 来优化项目中的翻译管理。

安装 ngx-translate-extract

我们可以使用 npm 命令来安装 ngx-translate-extract：

npm install ngx-translate-extract --save-dev

创建翻译文件

在我们开始使用 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 标签中添加以下脚本：

"scripts": {
    ...
    "extract-i18n": "ng xi18n --output-path src/assets/i18n"
},

3. 运行脚本

在命令行中运行以下命令，以提取翻译文本：

npm run extract-i18n

提取后的文本将被写入 src/assets/i18n/messages.xlf 文件。

使用翻译文本

在用 ngx-translate 实现翻译时，需要先引入 TranslateModule.forRoot()，并在 app.module.ts 中进行导入，例如：

-- -------------------- ---- -------
------ - ---------------- --------------- - ---- ----------------------
------ - ------------------- - ---- -----------------------------

-----------
    ---
    -------- -
        ---
        -------------------------
            ------- -
                -------- ----------------
                ----------- ------------------
                ----- ------------
            -
        ---
        ---
    --
    ---
--

------ ----- --------- --

------ -------- ----------------------- ----------- -
    ------ --- --------------------------
-

现在我们可以在组件中使用翻译文本了。

例如，在以下组件中，我们将会使用翻译之后的 "Hello World"：

-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------------- - ---- ----------------------

------------
    --------- -----------
    ------------ -----------------------
    ---------- -----------------------
--

------ ----- ------------ -
    ----- - -----------------------------

    ------------------- ---------- ----------------- -
        -------------------------------
        --------------------
    -
-

示例代码：

<h1>{{ 'HELLO_WORLD' | translate }}</h1>

总结

使用 ngx-translate-extract 可以帮助我们快速完成 Angular 项目中的翻译管理。使用提取、管理、导出的方式更加灵活，增加了维护性与扩展性。希望这篇文章对您有所帮助，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005587881e8991b448d5b8e

NPM 包 ngx-translate-extract 使用教程