Heim >Web-Frontend >CSS-Tutorial >Wie formatiere ich InnerHTML-Inhalte in Angular mithilfe der Ansichtskapselung?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-01 15:28:30366Durchsuche

How to Style InnerHTML Content in Angular Using View Encapsulation?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn