Angular 8 中错误消息插值的国际化答案

【问题标题】：Internationalization of Interpolation of error messages in Angular 8Angular 8 中错误消息插值的国际化
【发布时间】：2019-08-21 01:06:32
【问题描述】：

我正在为演示目的开发 Angular 应用程序，并且我已经实现了书店应用程序，C# 中的基本 Web Api 和其他。

现在我正在使用 Angular i18n 实用程序来制作我的法语和土耳其语应用程序。我参考了 Angular 文档并为标签、文本输入和占位符工作。但是我已经为注册和登录页面实现了反应式表单。它具有基于用户输入的各种自定义验证，它通过绑定不同的错误消息使用插值生成错误消息。

如何根据消息翻译不同的消息。 IE。错误信息是“用户名必须是必需的”，所以它应该翻译成法语，如果错误信息是“电子邮件必须是必需的”，它应该翻译成法语。

我已经搜索了 Interpolation 并根据文档进行了尝试，但我无法找到解决方案。

 <div>
     <p *ngIf="messageerrors" style="color:red" i18n>{{messageerrors}}</p>
</div>

 messageerrors : string = '';

 this.messageerrors = "username must be required";

 this.messageerrors = "Email must be required";

 <!--message.xlf file-->
<trans-unit id="144f3b27d028b0f3d2f79e9ad8996f73703778b3" datatype="html">
    <source>
    <x id="INTERPOLATION" equiv-text="{{messageerrors}}" />
    </source>
    <target>
        <x id="INTERPOLATION" equiv-text="{{messageerrors}}" />
    </target>  
<context-group purpose="location">
    <context context-type="sourcefile">src/app/components/login/login.component.html</context>
    <context context-type="linenumber">8</context>
</context-group>

this.messageerrors = "用户名必须是必需的";应将错误消息显示为“nom d'utilisateur doit être requis in french”。

this.messageerrors = "必须提供电子邮件";应将错误消息显示为 "电子邮件 doit être requis"enter code here

【问题讨论】：

标签： angular string internationalization translation interpolation

【解决方案1】：

我从未在 Angular 中真正实现过 i18n，但我已经广泛阅读了文档，而 Angular i18n 工具对我来说似乎相当缺乏。

首先，您需要为每个翻译构建和托管应用程序的单独副本。其次，就您的问题而言，它似乎仅适用于模板中的文本。似乎不支持在组件中翻译字符串变量。对我来说，这两个都会破坏交易。

幸运的是，还有其他可用的 i18n 库，例如，ngx-translate，它可以在单个应用程序中支持多种翻译，并且具有管道、指令和服务，因此您几乎可以翻译任何您想要的内容。

【讨论】：

【解决方案2】：

好的，感谢您抽出宝贵时间完成它，但我实现了自己的方法，我创建了包含源消息列表、语言键及其代表该语言的消息的 json 文件，然后我创建了自定义管道并传递了 json字符串和语言与源消息一起作为参数传递，它可以正确地用于动态验证消息。

【讨论】：

您能在此处添加您的解决方案吗？

【解决方案3】：

我们使用 transloco 来翻译我们应用程序中的每个字符串。我们开发了这个库来自动添加验证消息并进行翻译。

https://github.com/RiskChallenger/translation-validation

【讨论】：