Добавление ‹strong›/полужирного текста в переведенную строку с использованием angular-translate

В настоящее время я ищу решение, чтобы поместить ОДНО полужирное слово в строку, переводимую фильтром angular-translate. Пример кода ниже: (Я уверен, что решение простое... Я просто не могу понять это!)

мой языковой файл JSON выглядит так:

"AUTHENTICATE-ENTER-CODE": "blah blah blah"

В моем html-файле у меня есть это (которое правильно переводится в соответствии с ключом: значение):

{{'AUTHENTICATE-ENTER-CODE' | translate}}

РЕЗУЛЬТАТ: "бла-бла-бла"

Результат, который я ищу, это "бла бла бла"

Я мог бы разделить это на несколько ключей перевода, но конкретный перевод состоит из нескольких слов, выделенных жирным шрифтом, в нескольких предложениях... и мне сказали попытаться свести ключи перевода к минимуму, так как у нас есть пара сотен в этом проекте.

Я попытался поместить полужирные теги HTML, окружающие шрифт, который я хочу выделить жирным шрифтом (зная, что это все равно не сработает), и нет... это не работает! Я также просмотрел API angular-translate и не смог найти именно то, что искал.

Любой вклад был бы замечательным!


person MattTanner    schedule 05.12.2014    source источник
comment
"AUTHENTICATE-ENTER-CODE": "blah <b>blah</b> blah" не работает?   -  person Aniket Sinha    schedule 05.12.2014
comment
Это не так, если вы используете стратегию санации   -  person Overdrivr    schedule 16.10.2016
comment
Возможный дубликат Как обрабатывать строки, содержащие HTML, с помощью Angular-Translate?   -  person Overdrivr    schedule 16.10.2016


Ответы (2)


Если вы используете i18n или любой другой файл JSON для контента в версиях Angular 2+. Используйте это

JSON-файл

"TextWithHtmlExample": "blah <b>blah</b> blah"

Html-файл (шаблон Angular)

<p [innerHTML]="'TextWithHtmlExample' | translate"></p>

Выход будет-

бла бла бла

person Umang Patwa    schedule 16.05.2019
comment
отличное решение - person MightGod; 26.10.2020

перевод-компиляция

Вот пример, я пытался использовать html-теги, а также использовать директивы в переведенной строке.

http://jsfiddle.net/walvekarnikhil/0j7pd40b/

<span translate="FOO" translate-compile></span>
person Nikhil Walvekar    schedule 01.05.2015
comment
translate-compile на самом деле этого не делает (и на самом деле по умолчанию установлено значение true). Причина, по которой ваш jsfiddle работает, заключается в том, что вы не устанавливаете стратегию очистки для $translateProvider, поэтому angular-translate не избегает HTML. Это также очень небезопасно, и angular-translate предупреждает вас об этом в консоли. - person NeuroXc; 27.09.2016
comment
@NeuroXc правильно, перевод-компиляция не решает проблему. - person Nikhil Walvekar; 18.10.2016