ビューテンプレートの角度作成スタイルタグ？

Question

一般的なHTMLフラグメントコンポーネントを作成します。アイデアは、どこかのDBにhtmlフラグメントを格納し、それらに適用するスタイルを格納することができます。

ビューテンプレート内のhtml構造体を挿入するinnerHtmlを簡単に設定できますが、ビューテンプレートに<style>タグを動的に挿入するにはどうすればよいですか？ここで

は、私が持っているものです。ここで

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

export class HtmlFragmentComponent { 

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

は、ビューテンプレートです：

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

どこ：

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

は、その後、私はこのようにそれを使用しようとしています

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> 

は正しく動作しません。これを行う方法はありますか？

Answer 1

を使用してHTML要素に文字列からスタイルを適用することができます）、しかし、それはコンポーネント内でプログラム的に行うことができます。

ngOnInit() { 
    const css = 'a {color: pink;}'; 
    const head = document.getElementsByTagName('head')[0]; 
    const style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.appendChild(document.createTextNode(css)); 
    head.appendChild(style); 
} 

Answer 2

HEADにスタイルエレメントがあると想定されています。

あなたは（角度テンプレートコンパイラがそれを許可していないテンプレート自体で行うことができず、ただの<style>タグを削除します[attr.style]

@Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <h2 [attr.style]="style">Hello {{name}}</h2> 
     </div> 
    `, 
    }) 
    export class App { 
    style; 
    myStyleStr = 'color:blue'; 

    name:string; 
    constructor(private sanitizer: DomSanitizer) { 
     this.name = `Angular! v${VERSION.full}`; 
     this.style = sanitizer.bypassSecurityTrustStyle(this.myStyleStr); 
    } 
    }