Angular добавить разметку в пользовательский канал

Question

Я хочу создать пользовательский канал highlightPipe, который добавляет <mark> для выделения текста с использованием класса css:

 {{ 'i am some random text' | highlight:'some' }}

, который будет переведен в

I am <mark>some</mark> random text

Однако, когда я реализую трубу, результат уходит на последнюю страницу. Например, это действительно показывает <mark>some</mark>

Есть ли способ сообщить трубе, что ей разрешено добавлять реальные HTML?

Answer 1

Вам необходимо использовать внутреннее свойство Html, чтобы отображать содержимое как html.

<div [innerHTML]="textToBeDisplay | highlight:'some'"></div>

Также убедитесь, что вы используете DomSanitizer и в своих каналах.

return this.domSanitizer.bypassSecurityTrustHtml(textToBeDisplay);