在 Angular 中动态附加翻译文本答案

【问题标题】：Dynamically appending translated text in Angular在 Angular 中动态附加翻译文本
【发布时间】：2020-01-20 07:59:47
【问题描述】：

我正在使用 ngx-translate ，我在 Angular 中有一个链接，其文本值将是动态的并且应该被翻译，例如它应该是格式 'Hello XYZ', 'Hello ABC' ，我如何在 HTML 模板中传递参数，如 'ABC' 和 'XYZ' 这样链接将是 'Hello ABC '和'你好XYZ'。

<div class="parent">

          <a class="link">

            {{ MYCONSTANTS.HELLO | translate}}

          </a>

 </div>

这里 MYCONSTANTS.HELLO 的值为 'Hello'

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

ngx-translate 支持动态传递的参数。我想您的 json 如下所示：

"HELLO": "HELLO {{param}}"

我们可以在你的情况下动态渲染参数

{{ MYCONSTANTS.HELLO | translate {param: abc  }}

在组件中

abc: string = 'ABC'; //This can be dynamic

【讨论】：

同样可以通过以下代码实现： this.translateService.instant('MESSAGES.VALIDATION.MAXLENGTH', {'length' : 6}) 和 "MESSAGES.VALIDATION.MAXLENGTH": "最多允许 {{length}} 个字符”
如何将参数作为键从 en-US.json 传递，例如translate:{currency:'currency'}?假设在 en-US.json 中提到了这个 "currency:" "USD"

【解决方案2】：

<div class="parent">

          <a class="link">

            {{ MYCONSTANTS.HELLO | translate}} {{ MYCONSTANTSPATH + '.foo' | translate }}

          </a>

 </div>

【讨论】：

您好 MoxxiManagarm，感谢您的回复，但是 ABC 应该是动态的，也应该被翻译，在这种情况下，我们只是附加 ABC。
edited，表示可以动态编辑模板中的路径字符串

【解决方案3】：

html

<div class="parent">
  <a class="link">
    {{ MYCONSTANTS.HELLO | translate}} {{ abcVar | translate }}
  </a>
</div>

在ts文件中创建一个变量名'abcVar'

let abcVar = 'ABC'

如果您有任何疑问，请告诉我

【讨论】：

【解决方案4】：

在 html 文件中你可以这样写来传递参数：

 <a class="link" [translate]="'MYCONSTANTS.HELLO'" [translateParams]="{value: 'ABC'}"></a>

在 en.json 文件中这样写：

 "MYCONSTANTS": {
    …
    "HELLO": "Hello {{value}}!"
 }

这里我把静态字符串当作ABC，你可以取变量然后赋值给它。

【讨论】：