Рендеринг CSS для innerHtml, используя angular2
Я пытаюсь отобразить шаблон HTML, используя innerHTML и строку html + css, полученную из SQL.
Пример строки шаблона:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>
Теперь он прекрасно отображает HTML, но выглядит так, будто отбрасывает теги стиля и просто отображает текст внутри него.
Пример рендера:
HTML рендер часть:
<div [innerHtml]="templateBody">
</div>
Home.component.ts части:
@Component({
selector: "home",
templateUrl: `client/modules/home/home.component.html`,
encapsulation: ViewEncapsulation.Emulated
})
export class HomeComponent implements OnInit{
templateBody: string;
.....other code
}
Я пробовал это с инкапсуляцией: ViewEncapsulation.Emulated / None и т. Д., Пробовал встроенный CSS, и я пытался добавить: host >>> перед тегом p. Они все делают одинаково.
Какие-либо предложения?