使用 Symfony 翻译 angularJS 值

Question

我在后端使用 Symfony 并通过 twig 呈现模板。 对于翻译，我使用以下指南，效果很好。 https://symfony.com/doc/current/translation.html

作品：

{{ "Active Option" | trans({}, 'frontend', app.request.locale) }}

但问题是，我有一些必须翻译的单词在 angularJS 变量中。 我有多个 .xlf 文件用于翻译，我知道 angular.translate。 但我不想实施它。

{{ '{{' }} item.optionTitle {{ '}}' | trans({}, 'option', app.request.locale) }}

任何人都可以解释我如何使用树枝翻译来翻译 angularJS 变量的值？

Answer 1

https://github.com/willdurand/BazingaJsTranslationBundle

twig 的翻译在服务器端呈现，您的 js 在客户端。 使用此包，您可以将翻译公开给 js。 但我对那个包和角度没有经验。

Answer 2

使用verbatim标记。 它将部分标记为不应解析的原始文本。

例如：

创建树枝变量并在角度变量的值处影响它

{% set optionTitle %}
    {% verbatim %} {{ item.optionTitle }}{% endverbatim %} 
{% endset %}

翻译

{{ optionTitle | trans({}, 'option', app.request.locale) }}

现在{{ item.optionTitle }}不会被 twig 解析，而是被 angularjs 解析。

Answer 3

您可以创建一个接受字符串翻译的 API 端点

/api/translate?string=Active+Option

并在 API 控制器中进行翻译

$translator->trans($string);

然后在 AngularJS 中构建一个简单的翻译过滤器

angular.filter('apiTranslate', function($http) {
  return function(string) {
    $http.get('/api/translate?string=' + string).then(function (response) {
      return response;
    });
  };
})

请记住，还有其他解决方案可以很好地解决此问题（如建议的 BazingaJsTranslationBundle），但您提到您不想使用库，并想使用 TWIG 进行翻译。

Answer 4

没有太多的选择。 你需要在你的html创建这样的东西

<script>
   var Global = Global || {};
   Global.translation = {{ catalogue|raw|json_encode }}
</script>

通过这种方式，您可以将翻译全局公开给您的其他文件。

什么是catalogue ？

从2.6 版起， symfony 为您提供了一种准确获取整个翻译目录的方法，以防您需要将其公开给前端

如果您想在应用程序之外使用相同的翻译目录（例如在客户端使用翻译），则可以获取原始翻译消息。 只需指定所需的语言环境

文档

$catalogue = $translator->getCatalogue('fr_FR');
$messages = $catalogue->all();
while ($catalogue = $catalogue->getFallbackCatalogue()) {
   $messages = array_replace_recursive($catalogue->all(), $messages);
}
// $messages contains the whole catalogue that you have to pass to frontend

所以基本上你的catalogue将与前端共享。

回到前端

然后我创建了一个函数，它简单地按键返回翻译。

function _translate(key) {
    return Global["translation"][key];
}