在 Angular 中动态附加翻译文本

Question

我正在使用 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'

Answer 1

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

"HELLO": "HELLO {{param}}" 我们可以根据您的情况动态渲染参数

{{ MYCONSTANTS.HELLO | translate {param: abc }} 在组件中

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

Answer 2

<div class="parent">

          <a class="link">

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

          </a>

 </div>

Answer 3

html

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

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

let abcVar = 'ABC' 如果您有任何疑问，请告诉我

Answer 4

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

<a class="link" [translate]="'MYCONSTANTS.HELLO'" [translateParams]="{value: 'ABC'}"></a> 并在 en.json 文件中这样写：

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

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

Answer 5

我尝试了上述解决方案，但出现了错误，已通过此代码解决了。

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