Warum werden Stile in Angular nicht auf InnerHTML angewendet?

Stile funktionieren nicht für innerHTML in Angular

Problemstellung:

Wenn HTML-Code als innerHTML an eine Ansicht übergeben wird, Im Code definierte Stile werden nicht angewendet. Wenn der HTML-Code keine Inline-Stile enthält, wird er korrekt angezeigt. Wenn dem HTML-Code jedoch Inline-Stile wie Hintergrundfarbe hinzugefügt werden, werden diese ignoriert.

Ursache:

Dieses Verhalten ist auf Folgendes zurückzuführen: Die standardmäßige Komponentenkapselung von Angular ist auf „Emuliert“ eingestellt. Die emulierte Kapselung verhindert, dass CSS-Stile Elemente innerhalb und außerhalb der Komponente beeinflussen.

Lösung:

Damit in innerHTML definierte Stile angewendet werden können, muss die Kapselung der Komponente erfolgen in „Keine“ geändert werden. Dies kann durch Hinzufügen des folgenden zusätzlichen Codes zur App erreicht werden:

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 {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}

Wenn die Kapselung auf „Keine“ eingestellt ist, werden in innerHTML definierte Stile automatisch zum DOM hinzugefügt, sodass sie auf die angewendet werden können Elemente, die durch den HTML-Code erstellt wurden.

Das obige ist der detaillierte Inhalt vonWarum werden Stile in Angular nicht auf InnerHTML angewendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!