Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?

InnerHTML in Angular mithilfe der Ansichtskapselung formatieren

In Angular können Sie durch Festlegen der innerHTML-Eigenschaft HTML-Inhalte innerhalb der Ansicht einer Komponente dynamisch rendern. Beim Versuch, diesen eingefügten Inhalt zu formatieren, können jedoch Probleme auftreten.

Problem: Wenn innerHTML zum Einfügen von HTML-Inhalten verwendet wird, die Inline-Stile enthalten, werden die Stile möglicherweise nicht angewendet. Beispielsweise wendet der folgende Code den Hintergrundfarbenstil nicht auf das injizierte div-Element an:

<code class="typescript">this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';</code>

Lösung: Angular verwendet standardmäßig ein Konzept namens „emulierte“ Ansichtskapselung. Dadurch wird verhindert, dass innerhalb von Komponenten definierte Stile mit außerhalb von Komponenten definierten Stilen kollidieren. Um Inline-Stile für injizierte Inhalte zuzulassen, müssen Sie die Kapselung auf „Keine“ ändern.

<code class="typescript">@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})</code>

Durch Festlegen der Kapselungseigenschaft auf „Keine“ verhindert Angular nicht mehr, dass Inline-Stile angewendet werden. Dadurch können Sie Stile sowohl im Styles-Array der Komponente als auch im eingefügten HTML-Inhalt definieren, und Angular wendet sie automatisch auf das DOM an.

Das obige ist der detaillierte Inhalt vonWie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!