[解決済み] AngularのinnerHTMLでスタイルが機能しない [重複]。

質問

ビューにinnerHtmlとしてhtmlを渡しています。以下は私のビューです。

<div [innerHTML]="someHtmlCode"></div>

を渡すと、正常に動作しています。

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

のように、色を含む以下のコードを渡すと、うまくいきません。

 this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';

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

あなたが得ているこの動作は正常です。に追加されたクラスは innerHTML に追加されたクラスは無視されます。なぜなら、デフォルトではカプセル化は Emulated . これは、Angularがコンポーネントの内側と外側でスタイルをインターセプトするのを防ぐことを意味します。 カプセル化を次のように変更する必要があります。 None に変更する必要があります。 こうすることで、好きな場所でクラスを定義できるようになります。 styles の中、あるいは別の .css , .scss または .less のようなスタイルシートがあれば、Angularはそれらを自動的にDOMに追加します。

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

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}