Динамически добавляем переведенный текст на Angular

Question

Я использую ngx-translate, у меня есть ссылка на Angular, текстовое значение которой будет динамическим и должно быть переведено. Например, оно должно иметь формат 'Hello XYZ ', 'Hello ABC ', как я могу передать параметры в шаблоне HTML, такие как' ABC 'и' XYZ ', так что ссылка будет' Hello ABC 'и 'Hello XYZ ' соответственно.

<div class="parent">

          <a class="link">

            {{ MYCONSTANTS.HELLO | translate}}

          </a>

 </div>

Здесь MYCONSTANTS.HELLO будет иметь значение 'Hello'

Answer 1

ngx-translate поддерживает параметры, которые вы можете передавать динамически.Я полагаю, ваш json выглядит следующим образом:

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

, и мы можем динамически визуализировать param, в вашем случае

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

In Component

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

Answer 2

В html-файле вы можете написать так, чтобы передать параметры:

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

, а в файле en.json напишите так:

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

И здесь я взял статическую строкукак ABC, вы можете взять переменную и затем присвоить ей значение.

Answer 3

html

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

в файле ts создайте имя переменной 'abcVar'

let abcVar = 'ABC'

Дайте мне знать, если у вас есть какие-либо сомнения

Answer 4

<div class="parent">

          <a class="link">

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

          </a>

 </div>