将 Symfony Translation 传递给 Symfony Webpack Encore

Question

对于 Symfony，我使用翻译、Twig 和Webpack encore组件。

我可以在前端 Twig 中翻译：

'my_key'|trans

我使用命令yarn encore dev生成我的app.js，但PHP 翻译组件无法在 Javascript 中访问。

我有很多东西要用 javascript 翻译。

Answer 1

不幸的是，由于 JS 不是由 PHP 处理的，并且扩展后也不是由 Symfony 处理的，因此您将无法访问 js 文件中的 Symfony 翻译组件。

当您不需要传递太多翻译时，可以使用的解决方法是在 twig 模板内创建一个 JS 数据对象作为 Symfony 应用程序的一部分，然后从 js 文件访问它。所以大致是这样的：

# inside your twig template, e.g. index.html.twig
{% block javascripts %}
    <script type="text/javascript">
    const TRANSLATION_MAP = {
        'my_key': "{{ 'some_key '|trans }}",
        'my_other_key': "{{ 'other_key '|trans }}"
    };
    </script>

    {{ parent() }} # This loads all your js files which can then access the translation map defined above
{% endblock %}

此解决方案的缺点是，您必须决定将哪些键放入翻译映射中，而不真正知道它们是否被使用，因此这可能会变得有点低效且难以遵循。另外你必须小心你的翻译内容是有效的 json。您可以应用（自定义）转义/过滤来确保这一点，但仍然使它有点脆弱。

总而言之，这可能不是最好的解决方案，但对于较小的项目来说可能是一个不错的解决方法，直到您发现它变得更加麻烦并且您必须找到更复杂的东西。