动态组件的Angular i18n转换

时间:2018-06-07 13:18:00

标签: angular dynamic internationalization translation angular-i18n

我一直在阅读Angular 2+ i18n,并一直在寻找尝试构建动态组件的最佳方法。

问题:

  1. i18n无法将变量文本转换为动态
  2. 的xlf文件
  3. i18n使用i18n属性
  4. 很难用文本制作动态组件

    可能的解决方案:

    即使我们不能在变量中使用动态字符串来生成语言资源文件,我们仍然可以创建组件并将文本传递给它们。下面的示例是使用<app-error>显示一个输入错误消息以及动画的一个表单。将有其他形式,因此<app-error>组件必须是可重用的。

    考虑到其他表单组件的可重用性,我做了类似于以下的操作。这种方式允许传递文本并使用transclusion将已翻译的文本注入错误消息<app-error>组件。

    form.component.html

    <app-error
      i18n="Error | form validation">
      Please enter a first name.
    </app-error>
    

    应用-error.component.html

    <li>
      <ng-content></ng-content>
    </li>
    

    我能够提出上述解决方案才能正常工作,因为i18n会将其解析并翻译,并且文本会被<ng-content>正确注入。所以这看起来是一个很好的解决方案吗?

    我的想法是必须有更好的方法将翻译文本传递给组件或能够使用i18n构建动态组件。有可能解决这个问题吗?

0 个答案:

没有答案