Wie füge ich ein internes Stylesheet (nicht inline) zur Laufzeit in Angular hinzu?

Question

In meiner Angular 4-App habe ich eine Seite, deren Inhalt in einem JSON (teilweise CSS-Definitionen und teilweise HTML-Markup) unter einer bestimmten URL auf meinem Server gespeichert ist. Also habe ich eine Shell-Komponente gemacht, um den Inhalt in Angular zu hosten.

Für HTML musste ich <div [innerHTML]="my_html"></div> in der Vorlage und this.my_html = this.sanitizer.bypassSecurityTrustHtml(my_html); im Skript verwenden.

Für CSS, habe ich versucht,

1. <style [innerHTML]="my_css"></style>
2. <style>{{my_css}}</style>

mit verschiedenen Kombinationen von sanitization aber Angular immer das <style> Element gefährden. Insbesondere:

1. in diesem Fall entfernt es das Element aus der Vorlage, aber es hängt es nicht an den Kopf. Das Element verschwindet einfach.
2. in diesem Fall entfernt es das Element aus der Vorlage und hängt es an den Kopf wie folgt <style>{%BLOCK%}</style>. Mit anderen Worten, das Element ist nutzlos.

Answer 1

Am Ende hatte ich jQuery $('<style>').text(my_css).appendTo('head'); im ngOnInit() Handler zu verwenden, die gut funktioniert, aber ich fühle mich nicht ... Eckige.