Warum gilt mein CSS nicht für InnerHTML-Inhalte in Angular?

Warum wird CSS nicht auf InnerHTML-Inhalte in Angular angewendet?

In Angular stellt das Einfügen von HTML-Inhalten in eine Ansicht mithilfe der innerHTML-Eigenschaft Posen dar Ein Problem: Das Styling wird möglicherweise nicht wie erwartet angewendet. Dies ist auf den Kapselungsmechanismus von Angular zurückzuführen, der verhindert, dass externe Stile den Inhalt innerhalb einer Komponente beeinträchtigen.

Grundlegendes zur Shadow-DOM-Kapselung

Standardmäßig verwendet Angular die emulierte Kapselung. Erstellen eines Schatten-DOM und Isolieren von Komponentenstilen. Daher werden Stile, die außerhalb des Komponentenbereichs innerhalb des von innerHTML eingefügten HTML definiert sind, ignoriert.

Lösung: Kapselung in „Keine“ ändern

Um dieses Problem zu beheben, müssen Sie Sie können die Kapselung von Angular überschreiben, indem Sie die Kapselung in Ihrer Komponente auf „Keine“ setzen. Dadurch können Stile aus externen Quellen auf den eingefügten HTML-Inhalt angewendet werden.

Hier ein Beispiel:

<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>

Indem wir die Kapselung auf „Keine“ setzen, deaktivieren wir das Schatten-DOM von Angular und lassen CSS zu innerhalb des injizierten HTML-Codes wirksam werden. Infolgedessen wird der Text innerhalb des eingefügten HTML-Divs mit einer blauen Hintergrundfarbe gerendert.

Das obige ist der detaillierte Inhalt vonWarum gilt mein CSS nicht für InnerHTML-Inhalte in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!