Как использовать привязку свойств innerHTML в Angular
Введение
Angular 2+ поддерживает привязку свойства [innerHTML], которая будет отображать HTML. Если бы вы в противном случае использовали интерполяцию, она была бы обработана как строка.
В этой статье вы узнаете, как использовать [innerHTML], а также некоторые рекомендации по использованию.
Предпосылки
Если вы хотите следовать этой статье, вам понадобятся:
- Знакомство с привязкой свойств Angular также может быть полезным.
Шаг 1 — Использование innerHTML
Для целей этой статьи предположим, что вы работаете с компонентом, который содержит string, состоящий из комбинации объектов и элементов открытого текста и HTML:
export class ExampleComponent {
htmlStr: string = 'Plain Text Example & <strong>Bold Text Example</strong>';
}
Давайте рассмотрим шаблон, который использует интерполяцию этой строки:
<div>{{ htmlStr }}</div>
После компиляции этот код выдаст результат:
Пример простого текста & Пример полужирного текста
Объекты HTML и элементы HTML не отображаются.
Теперь давайте рассмотрим шаблон, который использует привязку свойства [innerHTML] к этой строке:
<div [innerHTML]="htmlStr"></div>
После перекомпиляции этот код выдаст результат:
Пример обычного текста и пример полужирного текста
Обратите внимание, что HTML-объекты и HTML-элементы визуализируются.
Шаг 2 — Понимание ограничений
Рендеринг HTML обычно может включать межсайтовый скриптинг (XSS). Визуализированный HTML-код может содержать вредоносные скрипты, представляющие угрозу безопасности.
Один из методов борьбы с XSS — ограничение типов HTML-элементов и атрибутов набором известных «безопасных» элементов и атрибутов.
За кулисами [innerHTML] использует DomSanitizer Angular, который использует список утвержденных HTML-элементов и атрибутов.
Примечание. Полный список разрешенных HTML-элементов и атрибутов можно просмотреть в html_sanitizer.ts.
Это ограничит ваши значения [innerHTML] от использования тегов <script> и <style> и атрибутов style. Помните об этом ограничении, когда решите использовать [innerHTML].
Заключение
В этой статье вы познакомились с привязкой свойств [innerHTML] в Angular 2+. Это приведет к отображению HTML-разметки, содержащейся в строке.
Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.