Очень часто разработчики сталкиваются с задачей, когда необходимо отобразить строку, включающую HTML-теги, в Angular 4+. Допустим, есть следующая строка:
let str = "<p><em><strong>Пример</strong></em></p>";
При попытке вывести данную строку в HTML с использованием обычной интерполяции, как показано ниже:
{{str}}
Результатом будет просто отображение самой строки, включая HTML-теги:
<p><em><strong>Пример</strong></em></p>
Но что делать, если необходимо, чтобы текст «Пример» отображался полужирным и курсивом, а не просто текстом с тегами?
Для решения этой проблемы в Angular предусмотрен специальный атрибут innerHTML. Он позволяет интерпретировать содержимое строки как HTML-код и отображать его соответствующим образом.
Вот как должен выглядеть код для решения этой задачи:
<div [innerHTML]="str"></div>
Теперь строка будет отображаться в виде HTML-кода, и текст «Пример» будет выведен полужирным и курсивом, как и было задумано.
Однако стоит помнить, что использование innerHTML может быть потенциально опасным, так как это может привести к атакам типа Cross Site Scripting (XSS). Поэтому необходимо всегда быть уверенным в том, что содержимое строки безопасно для отображения.
В этом примере использовалась простая строка, но подход будет работать и для строк, полученных динамически.
Добавить комментарий