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 サイトの他の関連記事を参照してください。