у создать общий компонент HTML-фрагмент. Идея в том, что мы можем хранить фрагменты html где-то в БД и стили, которые должны быть применены к ним.

Я могу легко установить innerHtml для вставки html-структуры в базовый элемент в моем шаблоне представления, но как мне динамически вставить<style> тег в моем представлении шаблона?

Вот что у меня есть:

 @Component({
    moduleId: module.id,
    selector: ',htmlFragment',
    styleUrls: ['html-fragment.css'],
    templateUrl:'html-fragment.html'
})

export class HtmlFragmentComponent {

    @Input() htmlContent: string;
    @Input() styleContent: string;
}

Вот шаблон представления:

<style [innerHTML]="styleContent"></style>
<div [innerHTML]="htmlContent"></div>

Тогда я пытаюсь использовать это так:

 <htmlFragment [htmlContent]='dHtml' [styleContent]="sHtml"></htmlFragment>

Куда:

dHtml: string = '<div>hello this is html<ul><li>bla bla</li><li>bla bla 2</li></ul></div>';
    sHtml: string = 'ul{list-style-type: none;}';

HTML-фрагмент правильно введен здесь:

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

Однако элемент стиля здесь:

 <style [innerHTML]="styleContent"></style>

не работает правильно. Есть ли способ сделать это?