Comment ajouter une feuille de style interne (pas en ligne) à l'exécution dans Angular?

Question

Dans mon application Angular 4, j'ai une page dont le contenu est stocké dans un JSON (partiellement les définitions CSS et partiellement le balisage HTML) à une certaine URL sur mon serveur. J'ai donc créé un composant shell pour héberger le contenu dans Angular. Pour le HTML, j'ai dû utiliser <div [innerHTML]="my_html"></div> dans le modèle et this.my_html = this.sanitizer.bypassSecurityTrustHtml(my_html); dans le script.

Pour CSS, j'ai essayé

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

avec différentes combinaisons de sanitization mais angulaire toujours compromettre l'élément <style>. En particulier:

1. Dans ce cas, il supprime l'élément du gabarit mais ne l'ajoute pas à la tête. L'élément disparaît juste. Dans ce cas, il supprime l'élément du gabarit et l'ajoute à la tête comme ceci
2. En d'autres termes, l'élément est inutile.

Answer 1

En fin de compte, je devais utiliser jQuery $('<style>').text(my_css).appendTo('head'); dans le gestionnaire ngOnInit(), qui fonctionne très bien, mais ne se sent pas ... angulaire.