[解決済み】Angular 2 - innerHTML スタイリング

質問

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

@Component({
  selector: 'calendar',
  template: '<div [innerHTML]="calendar"></div>',
  providers: [HomeService], 
  styles: [`h3 { color: red; }`]
})

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

どのように解決するのですか？

アップデート2 ::slotted

::slotted はすべての新しいブラウザでサポートされるようになったので ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

アップデート1 ::ng-deep

/deep/ は非推奨となり、代わりに ::ng-deep .

::ng-deep もすでに非推奨とされていますが、まだ代替はありません。

いつ ViewEncapsulation.Native はすべてのブラウザで適切にサポートされ、シャドウ DOM 境界を越えたスタイリングをサポートします。 ::ng-deep はおそらく廃止されるでしょう。

オリジナル

AngularはDOMに追加するHTMLにあらゆる種類のCSSクラスを追加し、シャドーDOMのCSSカプセル化をエミュレートして、コンポーネントからのスタイルのにじみ出しを防ぎます。Angularはまた、これらの追加されたクラスに合わせて追加したCSSを書き直します。を使って追加されたHTMLに対して [innerHTML] が追加されていないため、書き換えたCSSが一致しません。

回避策として

• コンポーネントに追加されたCSSの場合

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

• に追加されたCSSについて index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>> (そして、同等の /deep/ しかし /deep/ はSASSでよりよく機能する)と ::shadow これらは shadow DOM CSS combinators (非推奨) に類似しており、以下のような場合にのみ動作します。 encapsulation: ViewEncapsulation.Emulated これは Angular2 のデフォルトです。これらはおそらく ViewEncapsulation.None が、その場合は必要ないので無視されるだけです。 これらのコンビネータは、クロスコンポーネント・スタイリングのためのより高度な機能がサポートされるまでの中間的な解決策に過ぎない。

別のアプローチとして

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

CSS をブロックするすべてのコンポーネント（CSS を追加する場所と、スタイルを設定したい HTML がある場所に依存します - たとえば、次のようになります）。 すべて コンポーネントを使用します。）

更新

プランカー例