Angular で InnerHTML にスタイルを適用する方法?

Angular での InnerHTML のスタイル

Angular で innerHTML を設定すると、スタイルが適切に適用されない問題が発生する可能性があります。これは、Angular のカプセル化メカニズムが原因で、デフォルトでは、innerHTML コンテンツによってスタイルが継承されなくなります。

これを解決するには、コンポーネントのカプセル化プロパティを「なし」に変更します。これにより、コンポーネントで定義されたスタイルを innerHTML コンテンツに適用できるようになります。

その方法は次のとおりです:

<code class="typescript">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>';
  }
}</code>

カプセル化を「なし」に設定すると、どこでもスタイルを定義できます。コンポーネントまたは別の CSS ファイルに含めると、InnerHTML コンテンツをレンダリングするときに、Angular が自動的にそれらを DOM に追加します。

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