如何使用ngx-translate本地化离子应用程序
2019-01-22 08:33:00
在之前的几篇文章中，我们探讨了Angular应用程序国际化的不同方式： 内置的I18n解决方案以及启用 上下文翻译编辑。在本文中，我们将向前迈出一步，学习如何在ngx-translate模块的帮助下翻译Ionic应用程序 。您可能知道，Ionic是一个构建在Angular之上的框架，允许创建跨平台的移动应用程序。它最初于2013年推出，最新版本4最近发布。
以下主题列在我们的议程上：
如何创建一个Ionic 4应用程序
将ngx-translate模块集成到应用程序中
设置默认语言环境并切换到另一个语言环境
如何存储翻译并使用HTTP客户端加载它们
执行实际翻译并提供插值参数
使用类中的翻译
那么，我们应该开始吗？
先决条件
如果您想要学习本教程，请安装以下内容：
NodeJS版本10或更高版本和NPM。早期版本也可以使用，但Ionic 4应用程序编译速度要慢得多。
Ionic 4，这是撰写本文时的最新版本。要安装它，请运行
npm install -g ionic并按照给定的说明操作。请注意，版本4当前不稳定，因此安装程序可能会询问您是否要选择版本3。
这就是它。完成后，运行以下命令创建一个新的Ionic应用程序：
tabs 这里只是要使用的模板的名称。
接下来，完成此命令后，您应该能够cd进入Translation目录并运行：
因此，服务器将启动，您的浏览器应打开localhost:8100包含一些样板内容的 页面。
整合Ngx-Translate
为了翻译我们的Ionic应用程序，我们需要一个ngx-translate模块，这是由Angular爱好者创建的第三方解决方案。你可能会问，为什么我们不使用内置的Angular模块。嗯，不幸的是，Ionic 4还不支持这个模块，似乎它不会在不久的将来推出。那么，让我们坚持使用ngx-translate：
除了核心库，我们还安装了http-loader，它将为我们加载JSON文件。
现在让我们导入所有必要的模块。打开src / app / app.module.ts文件并添加以下行：
接下来，定义导出的翻译加载器功能：
这个加载器将从我们即将创建的assets / i18n文件夹中获取JSON文件。
最后，将所有这些模块添加到 imports属性中：
设置默认区域设置
要提供默认语言环境，我们需要修改src / app / app.component.ts文件：
这里我们将英语设置为默认语言环境。如果您想切换语言，请说明.translate.use（'LANG_CODE'）。请注意，如果不这样做，请在之后添加此行setDefaultLang，并且在语言更改后页面上的文本将不会更新（这肯定是一个ngx-translate错误）。
执行简单翻译
好的，现在让我们翻译一下！导航到 src / app / tab1 / tab1.page.html文件，并按以下方式调整选项卡的标题：
这里我们使用 translate管道并提供翻译密钥（tab1.tabName）。要指定此转换，请在assets / i18n文件夹中创建两个文件：
en.json
ru.json
当然，您可以自由选择任何其他语言环境，但我会坚持使用英语和俄语。
翻译键内的点表示嵌套，因此文件应包含以下内容：
en.json
ru.json
嵌套（或命名空间）是一种非常有用的技术，因为它允许您将相关的翻译组合在一起。通过这种方式，您可能拥有博客或管理员等名称空间。此外，不同名称空间下的键可能具有相同的名称。
我们需要执行最后一步才能使其正常工作（是的，我知道，总有一些“最后”和“最后一步”）。打开src / app / tab1 / tab1.module.ts文件并修改如下：
通过这种方式，我们translate为给定模块启用管道。
执行上述步骤后，重新加载服务器。您应该看到第一个选项卡的标题现在具有正确的翻译。
将参数传递给翻译
在某些情况下，您可能需要将参数传递给翻译并将其插入到输出字符串中。让我演示如何做到这一点：
这里我们translate在p标签里面说。另外，请注意translateParams 以对象形式传递实际参数的属性。lang是参数名称，而是language值。tab1.invite是我们的翻译密钥。
现在为此密钥提供一个值：
ru.json
en.json
该{{lang}}是插值-将与的值替换language模板通过属性。
现在，language应该在某处定义变量，所以让我们在tab1.page.ts文件中进行：
我已经确定了两行代码：
导入翻译服务
获取当前使用的语言并将其存储在变量中
最后，重新加载页面并观察结果！
切换区域设置
当然，用户应该能够使用某种界面切换应用程序的语言环境。我们现在编写此功能！
首先，通过添加一个新的选择框来调整标记：
那么，这里发生了什么？
我们正在添加一个标记为“语言”的新项目（带有
translate属性）。该项目包含绑定到
language模型的选择框。每当选择新值时，触发
languageChange()方法。选择框还有一个翻译的占位符。
接下来，通过修改tab1.page.ts文件来处理事件处理程序：
通过说this.translateService.use()，我们实际上是在切换语言环境。
另外，让我们来处理标签和占位符的翻译：
ru.json
en.json
请注意，我没有Language为英语语言环境提供密钥。为什么？好吧，因为如果模块找不到翻译键，它将被简单地打印出来。对于英语语言环境，这是完全可以的，当然，你可能会说"Language": "Language"。
在类中执行翻译
有时您可能希望在课程内使用您的翻译。让我给你一个简单的例子。
首先，按以下方式调整tab1.page.ts文件：
让我们一步一步走：
创建一个我们稍后将在模板中显示的新属性。
以编程方式加载英语区域设置的新翻译。请注意，通过这样做，我们有效地消除了所有现有的翻译！
提供带插值的平移
在
somePropertykey 下进行转换（并传递值进行插值）。我们正在订阅一个活动，所以一旦响应到来.........我们将接收到的值分配给
someProperty属性。
因此，您可以使用tab1.page.html模板中的翻译：
PhraseApp和翻译文件
当然，使用翻译文件并不容易，特别是当应用程序很大并且支持多种语言时。您可能很容易错过某些特定语言的翻译，这可能会导致用户混淆。PhraseApp可以让您的生活更轻松： 抓住您的14天试用期！
当然，PhraseApp支持许多不同的语言和框架，包括JavaScript。它允许轻松导入和导出翻译数据。什么是酷，您可以快速了解哪些翻译键丢失，因为在大型应用程序中使用多种语言时很容易丢失。最重要的是，您可以与翻译人员合作，因为为您的网站进行专业的本地化更好 。
结论
在本文中，我们已经了解了如何在ngx-translate模块的帮助下翻译Ionic应用程序。您已经学习了如何提供翻译和加载它们，如何切换语言环境，如何执行插值以及如何使用类中的翻译。
因此，如您所见，本地化Ionic应用程序与转换Angular应用程序没有太大区别 - 因为这两种技术有许多相似之处。我希望您现在已准备好在实际项目中应用所描述的概念！一如既往，我感谢你和我待在一起，直到下一次。