☰

AngularのinnerHTMLでスタイルが機能しない[重複]質問する

tag-icon • tag-icon html css angular
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>';

ベストアンサー1

この動作は正常です。 に追加されたクラスは、innerHTMLデフォルトでカプセル化が であるため無視されますEmulated。つまり、Angular はスタイルがコンポーネントの内外でインターセプトされるのを防ぎます。コンポーネントでカプセル化を に変更する必要があります。こうすることで、 内、別の、またはスタイルシート (どちらでもかまいません)Noneなど、どこにでもクラスを定義でき、Angular はそれらを DOM に自動的に追加します。styles.css.scss.less

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>';
  }
}

おすすめ記事