ngx-translate: переводить строки в html

Question

Я использую lib ngx-translate для поддержки I18N в моем угловом приложении. Может ли кто-нибудь помочь мне отметить ниже HTML-фрагмент для перевода?

<span *ngIf="Days < 0 && !shortSentence">
      Follow-up is <span [class.font-bold]="highlightContent">{{ InDays | positiveNumber }} days</span> past due
    </span>

Я хочу отметить только текстовое содержимое внутри тега span. Как я могу сделать это как параметризованные переводы?

Любая помощь будет оценена.

Заранее спасибо.

Answer 1

Вот как вы можете использовать параметрический перевод с фильтрами:

// define translation with parameter
'TRANSLATION_KEY': '{{days}} days'

// use it in template
<span>{{ 'TRANSLATION_KEY' | translate: { days: followUpInDays | positiveNumber } }}</span>

Если вы хотите, чтобы переводом было целое предложение (включая HTML), вам нужно будет использовать innerHTML привязку свойства:

// define translation with parameter
'TRANSLATION_KEY': 'Follow-up is <span class="{{className}}">{{days}} days</span> past due'

// use it in template
<span *ngIf="Days < 0 && !shortSentence"
      [innerHTML]="'TRANSLATION_KEY' | translate: { className: (highlightContent ? 'font-bold' : ''), days: followUpInDays | positiveNumber }">
</span>