Как отобразить строковую переменную машинописного текста, содержащую html содержимое шаблона, как элемент, а не строку? - PullRequest
Новая
       75

Как отобразить строковую переменную машинописного текста, содержащую html содержимое шаблона, как элемент, а не строку?

1 голос
/ 05 апреля 2020

У меня есть приложение angular, у меня есть следующее в машинописи компонентов: 

field: string;
  constructor() { 
    this.field = "Hello, I am <b>happy</b><br><br><input type='text' value='hello' />"
  }

и в моем шаблоне html для компонента у меня есть это: 

<div [innerHTML]="field"></div>

Я ожидаю вывод: 

Hello, I am happy(happy in bold)

[Text input field here]

Вместо этого весь входной тег опущен. Любая идея, как визуализировать html такой контент на шаблон в angular?

1 Ответ

1 голос
/ 05 апреля 2020

Вы должны доверять HTML, прежде чем вводить его. Вы должны использовать DomSanitizer для такой вещи. Элемент h3 или p или div считается безопасным. Элементом ввода не является.

Вы можете создать канал и использовать его там, где он вам нужен. 

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

@Pipe({
    name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(v: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v); 
   } 
}

Теперь у вас html вы можете вызывать канал следующим образом: 

<div [innerHTML]="field | sanitizeHtml"></div>
...