角2 - innerHTMLスタイリング

Question

私はHTTPコールからHTMLコードのチャンクを取得しています。 HTMLブロックを変数に入れて[innerHTML]でページに挿入しますが、挿入されたHTMLブロックをスタイルすることはできません。誰も私がこれを達成する方法を提案していますか？

スタイルを設定したいHTMLは、変数「calendar」に含まれるブロックです。

Answer 1

更新:: NG-深い

/deep/::ng-deepで非推奨と置き換えられました。

::ng-deepも既に廃止予定ですが、まだ使用できる代替品はありません。

ViewEncapsulation.Nativeがすべてのブラウザで適切にサポートされ、シャドーDOM境界のスタイリングをサポートする場合、::ng-deepはおそらく中止されます。

元

角度は、部品の内外出血のスタイルを防ぐために、シャドウDOM CSSのカプセル化をエミュレートするためにDOMに追加されますHTMLにCSSクラスのすべての種類を追加します。 Angularは、これらの追加されたクラスに一致するように追加するCSSも書き換えます。 [innerHTML]を使用して追加されたHTMLの場合、これらのクラスは追加されず、書き換えられたCSSは一致しません。

回避策はCSSの

• を試みるようにCSS用

/* :host /deep/ mySelector { */ 
:host ::ng-deep mySelector { 
    background-color: blue; 
} 

• がindex.html

に添加される成分に加え

>>>（および同等物/deep/でも、/deep/はSASSでうまくいく）、::shadowが2.0.0-beta.10で追加されました。これらは、シャドーDOM CSSコンバイナ（非推奨）と似ており、Angular2のデフォルトであるencapsulation: ViewEncapsulation.Emulatedでのみ動作します。彼らはおそらくViewEncapsulation.Noneでも動作しますが、それらは必要ないので無視されます。 これらのコンビネータは、コンポーネント間のスタイリングのより高度な機能がサポートされるまで、唯一の中間的な解決策です。

別のアプローチは、あなたのCSSをブロックするすべてのコンポーネントに対して

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

を使用することです（あなたはCSSを追加する場所に依存し、HTMLを使用して、スタイルにしたいということです - あなたのすべてののコンポーネントであるかもしれませんアプリケーション）

更新

Example Plunker