使用 I18Next 和 Aurelia 进行动态翻译答案

【问题标题】：dynamic translation with I18Next and Aurelia使用 I18Next 和 Aurelia 进行动态翻译
【发布时间】：2018-04-30 08:17:03
【问题描述】：

我有一个正在集成 I18Next 的 aurelia 应用程序，我的 Aurelia 集成工作正常，一切进展顺利，直到我看到我们的菜单。对于普通翻译，我们只是使用像这样的 html 属性...

<a href="somelink" i18n="link1">Link 1</a>

然后在你的 translation.json 文件中

{
  link1: "some translation here"
}

效果很好，翻译得很好。我无法弄清楚的问题是如何处理动态内容，例如我们的菜单。我们正在做一个 repeat.for 来制作菜单，但是我如何告诉 I18Next 从 translations.json 文件中使用什么键？这是我的意思的简化示例。

<li repeat.for="item of router.navigation">
  <a href.bind="item.href" class="${item.isActive? 'is_active' : ''}>
    ${item.title}
  </a>
</li>

鉴于上述布局，你怎么可能告诉 I18Next 使用哪些键进行翻译，因为它是在循环中完成的。我尝试了几件事，但都失败了。我真的被困在这里，我需要使用 translation.json 文件来翻译它，但我不知道如何告诉它使用什么键进行翻译，是“home”、“about”、“contact” ，...？任何帮助将非常感激。谢谢。

【问题讨论】：

尝试像这样绑定它（基于您的第一个示例）：<a i18n.bind="item.title">
我想过，但由于有翻译文件，“item.title”不会被翻译，我需要item.title作为被翻译的部分。就像在链接示例中一样，我需要指向 translation.json 文件中的一个键。我正在绑定其他项目，例如用户名，不需要翻译。
如果您让item.title 的值成为翻译文件中的键，然后像上面的评论中那样绑定它，它应该可以工作。我自己也有类似的设置，我使用t.bind="messageKey"（t 相当于你的i18n 属性
这是有道理的，所以我会有类似 ${item.title} 的东西，然后链接到翻译键导航。[无论标题是什么]，然后我可以翻译。好的。谢谢。

标签： javascript aurelia i18next

【解决方案1】：

就像任何其他属性一样，您可以使用 aurelia 绑定到您的 i18n 属性。使用以下语法：

<a i18n.bind="'navigation.' + item.title"></a>

I18n 将在资源文件中查找名为 navigation.[item.title] 的键，因此如果 item.title 变量等于“home”，它将查找名为 navigation.home 的键。

【讨论】：