介绍
@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 文件,内容如下:
msgid "Hello world!" msgstr "你好,世界!"
我们可以在 Angular 应用中使用 ngx-translate 的 service,通过这种方式来翻译这个词条:
-- -------------------- ---- ------- ------ - ---------------- - ---- ---------------------- ------------ --------- ----------- --------- ------- ------ ------- - --------- -------- -- ------ ----- ------------ - ------------------- ----------------- ----------------- - --------------------------- --------------------------- ----------------------------------- ------- -- - ---------------------------- -- ------- ------- ------- --- - -
总结
我们已经学习了如何使用 @unifiedfactory/ngx-translate-gettext-loader 来将 gettext 翻译为 ngx-translate 可以理解的 json。 我们还学习了如何在 Angular 应用程序中使用 ngx-translate 来显示翻译后的文本。
希望此教程对您有所帮助,谢谢阅读!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005664581e8991b448e259a