私の CSS が Angular の InnerHTML コンテンツに適用されないのはなぜですか?

Angular では CSS が InnerHTML コンテンツに適用されないのはなぜですか?

Angular では、innerHTML プロパティを使用して HTML コンテンツをビューに挿入すると、問題: スタイルが期待どおりに適用されない可能性があります。これは、外部スタイルがコンポーネント内のコンテンツに干渉するのを防ぐ Angular のカプセル化メカニズムによるものです。

Shadow DOM カプセル化について

デフォルトでは、Angular はエミュレートされたカプセル化を使用します。 Shadow DOM を作成し、コンポーネント スタイルを分離します。したがって、コンポーネントのスコープ外、innerHTML によって挿入された HTML 内で定義されたスタイルは無視されます。

解決策: カプセル化をなしに変更します

この問題を解決するには、コンポーネントでカプセル化を None に設定することで、Angular のカプセル化をオーバーライドできます。これにより、外部ソースからのスタイルを、挿入された HTML コンテンツに適用できるようになります。

例は次のとおりです:

<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 {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>

カプセル化を None に設定することで、Angular のシャドウ DOM を無効にし、CSS を許可します。挿入された HTML 内で有効になります。その結果、挿入された HTML div 内のテキストは青色の背景色でレンダリングされます。

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