Блог

Я пытался отобразить простую строку с помощью [innerHTML], но у меня ничего не получается. В основном моя проблема заключается в том, когда я использую <> . Например, если моя строка:

 someText = "abc <1231> color"; 
  

Я могу визуализировать

abc <1231> цвет

но если моя строка: «abc

цвет abc

Как я могу отобразить свою строку с помощью [innerHTML]?

ЖИВАЯ ДЕМОНСТРАЦИЯ

Если вы хотите вставить только общий текст, а не фактический HTML, вы должны использовать следующий синтаксис:

 <div>{{someText}}</div>
  

Если для вас важно использовать [innerHTML] по какой-либо причине, вы можете использовать someText = 'abc <1231> color'.replace(/</g, 'amp;<') для удаления всех ваших HTML-тегов и, таким образом, решить вашу проблему.
Затем вы можете НЕ использовать какой-либо HTML в своем элементе.

Чтобы разрешить определенные элементы HTML, вы могли бы использовать что-то вроде этого:

 const someText = '<b>Bold Text <123></b>'.replace(/<((b|i|u|strong|a)s|>)/g, 'amp;<$1';
  

В любом случае, очень небезопасно вставлять пользовательский HTML-контент в ваши компоненты.
Вы можете просмотреть эту документацию, чтобы понять, почему.

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

Во-первых, я бы не стал использовать innerText or innerHTML полностью, если вы просто пытаетесь отобразить общие текстовые данные. Именно по этой причине Angular имеет встроенную привязку к данным, и я бы рекомендовал использовать это. Как упоминалось в первой части примера @nrausch.

Во-вторых, если по какой-то причине ваша конечная цель — отобразить HTML через innerHTML свойство для пользователя, правильный подход — очистить HTML с помощью встроенного в Angular DomSanitizer

Вот пример того, как использовать DomSanitizer:

Сначала создайте канал очистки:

 import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
  }
}
  

Во-вторых, используйте канал в ваших компонентах HTML:

 <div><strong>Binding Example:</strong> {{ name }}</div>

<div [innerHtml]="myHTML | safeHtml"></div>
  

Вот пример StackBlitz, который показывает вам оба метода.

Существует 2 решения

1. Используя innerText вместо innerHTML .

2. Вместо того, чтобы использовать <> someText, you can use буквы <> to show < amp; >`.

 someText = "abc amp;<1234amp;> color";