Angular の InnerHTML にスタイルが適用されないのはなぜですか?

Angular の innerHTML でスタイルが機能しない

問題ステートメント:

HTML コードを innerHTML としてビューに渡すとき、コード内で定義されたスタイルは適用されません。 HTML コードにインライン スタイルが含まれていない場合は、正しく表示されます。ただし、background-color などのインライン スタイルが HTML コードに追加される場合、それらは無視されます。

根本原因:

この動作は、次の原因によるものです。 Angular のデフォルトのコンポーネントのカプセル化は「エミュレート」に設定されています。エミュレートされたカプセル化により、CSS スタイルがコンポーネントの内側と外側の両方の要素に影響を与えることがなくなります。

解決策:

innerHTML 内で定義されたスタイルを適用できるようにするには、コンポーネントのカプセル化が必要です。 「なし」に変更されます。これは、次の追加コードをアプリに追加することで実現できます。

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

カプセル化を「なし」に設定すると、innerHTML 内で定義されたスタイルが自動的に DOM に追加され、スタイルを DOM に適用できるようになります。 HTML コードによって作成された要素。

以上がAngular の InnerHTML にスタイルが適用されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。