npm包 @unifiedfactory/ngx-translate-gettext-loader 的使用教程

阅读时长 4 分钟读完

介绍

@unifiedfactory/ngx-translate-gettext-loader 是一个 npm 包,用于将 gettext 语法翻译为 ngx-translate 可以理解的 json 格式。它是基于 webpack loader 的,因此可以与其他 webpack loader 一起使用。该包支持多种语言,并且能够很好地与 Angular 应用程序集成。

安装

要安装 @unifiedfactory/ngx-translate-gettext-loader,只需在终端中输入以下命令:

npm install @unifiedfactory/ngx-translate-gettext-loader --save-dev

配置

在 webpack.config.js 中添加 loader:

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

这里的 test 正则表达式用于指定包含 gettext 词条的文件。在 options 对象中,我们指定了输出格式为 json,verbose 选项用于打印一些有用的信息。你也可以选择忽略此选项。

在 Angular 应用中添加 translate-loader:

要将 gettext 翻译成 ngx-translate 理解的 json,并且让 Angular 应用可以使用它,需要安装 ngx-translate-loader。可以通过以下命令来安装它:

npm install @ngx-translate/core --save

然后,只需在 app.module.ts 文件中添加以下代码来配置 ngx-translate:

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

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

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

现在,我们已经正确地配置了 ngx-translate 和 ngx-translate-gettext-loader。

使用

我们现在可以开始使用 ngx-translate-gettext-loader 了。假设我们有一个名为 messages.po 的 gettext 文件,内容如下:

我们可以在 Angular 应用中使用 ngx-translate 的 service,通过这种方式来翻译这个词条:

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

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

总结

我们已经学习了如何使用 @unifiedfactory/ngx-translate-gettext-loader 来将 gettext 翻译为 ngx-translate 可以理解的 json。 我们还学习了如何在 Angular 应用程序中使用 ngx-translate 来显示翻译后的文本。

希望此教程对您有所帮助,谢谢阅读!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005664581e8991b448e259a

纠错
反馈