動的に作成された要素に対してangular2 CSSスタイルが機能しませんか？

Question

問題：angular2では、note.component.ts内の動的に作成された要素に対してnote.component.cssファイルが機能しません。誰もその理由を知っていますか？それとも正しい行動ですか？

note.component.cssは、note.component.htmlに既に存在する要素に対して機能します。 CSSスタイルをファイル "styles.css"に入れると、うまくいきました。私がDOMでスタイルを設定すると、うまくいきました。

ファイル構造：

app 
    components 
     note 
      note.component.css 
      note.component.html 
      note.component.ts 
index.html 
styles.css 

note.component.html：

<div id="section1"></div> 

note.component.css：

button{ 
    background-color: green; //doesn't work 
} 

Styles.cssを：

button{ 
    background-color: green; //worked 
} 

note.component.ts：

ngOnInit() { 
    var div = document.createElement("button"); 
    div.innerHTML = "Hello world"; 
    // div.style.backgroundColor = "green"; --- worked 
    document.getElementById("section1").appendChild(div); 
    } 

Answer 1

これは、コンポーネントのViewEncapsulationに関係しています。デフォルトではEmulatedに設定されており、コンポーネントのすべてのビューを別のスコープにラップします。

1）:host /deep/

:host /deep/ button { 
    background-color: green; 
} 

* EDITを使用してCSSの接頭辞ViewEncapsulation.None

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    ... 
    encapsulation: ViewEncapsulation.None 
}) 

2）にカプセル化を設定し、ウィリアムBが言ったようにはいあなたはするべきでありません：そこにそれを固定する二つの方法がありますこのようにDOMを操作しないでください。見てください#2 here