Как скомпилировать динамический HTML, содержащий угловые выражения

Question

Я загружаю HTML, содержащий угловое выражение, из базы данных. ex db html: <div>{{dynamicContent}} </div>

У меня уже есть ngModel для "dynamicContent" в моем компоненте. Проблема: когда я загружаю html из db, он печатается как обычный html. Следует оценить html и вывести значение ngModel.

В Angular 1 я использовал $ compile для того же, как я могу добиться этого с Angular 6?

this.sanitizer.bypassSecurityTrustHtml (значение);

<div class="col-md-4 col-sm-4 col-12 offset-md-1"  innerHtml="{{dynamicContent}}">

Answer 1

Вы должны использовать скобку [], чтобы выполнить ее, иначе она будет рассматриваться как строка. как это см. привязку данных в https://angular.io/guide/template-syntax

Answer 2

Пожалуйста, используйте метод ниже, я думаю, это будет работать для вас.

<div class="col-md-4 col-sm-4 col-12 offset-md-1" [innerHtml]="dynamicContent">

Answer 3

Вы могли бы сделать

div class="col-md-4 col-sm-4 col-12 offset-md-1" >{{dynamicContent | safeHtml"}}</Div>

или

<div class="col-md-4 col-sm-4 col-12 offset-md-1"  [innerHtml]="dynamicContent| safeHtml"></div>

Answer 4

Это почти то же самое в Angular 2+.

Правильный синтаксис: <div [innerHTML]="theHtmlString"></div>

Санация будет выполняться автоматически, предотвращая попадание злых тегов сценария в ваш div. Источник: Angular - Синтаксис шаблона