cssクラスをangular2要素にバインドする方法、コンパイル後に？

Question

HTMLに直接htmlコードを挿入すると、cssが記録され、要素が正しく表示されることは明らかです。

しかし、javascriptで要素をdinamically作成して挿入しようとすると、cssクラスは認識されません。

例えば、私が試した：

var el = document.createElement("div").setAttribute("class","some_class"); 

(...).appendChild(el). 

そしてelをsome_class

によって設定されたCSSルールに従わない私はこれを行うことができました唯一の方法は、直接変更でありますjavacriptの要素プロパティ：

var el = document.createElement("div").style.width = "20px"; //this works 

(...).appendChild(el). 

要素のスタイルが正しくあります。 残念ながら私はクラス名/ IDに行きたいと思っていました。

だから、どのようにこれを行うにはどのようなアイデアですか？どのように正確にjavacriptで新しく作成された要素をバインドすることができます_ngcontent-vkl-6タグはangular2コンパイル後に作成されますか？ （4+角度使用している場合）

Answer 1

使用RendererまたはRenderer2：

constructor(private renderer: Renderer) {} 

createElement() { 

const element = this.renderer.createElement(theElementToAppendTo, 'div'); 

    this.renderer.setElementAttribute(element, 'class', 'some_class'); 
} 

あなたがそれをやっている方法は、角度のために安全ではない、DOM操作はRendererや、他のバインディングを介して行われるべきですHostBindingとなります。

この例ではRendererを使用しています。

https://angular.io/docs/js/latest/api/core/index/Renderer-class.html

しかし、あなたは別のAPIを持っていたRenderer2を使用する必要があります4+角度使用している場合：

https://angular.io/docs/ts/latest/api/core/index/Renderer2-class.html

を私はこれを願っています助けてください。