Warum berücksichtigt mein innerHTML keine Stile in Angular und wie kann ich das beheben?

innerHTML respektiert Stile in Angular nicht

In Angular kann die Verwendung von innerHTML zur Anzeige von HTML ein Stilproblem darstellen, insbesondere wenn versucht wird, CSS anzuwenden Stile innerhalb des HTML-Codes. Dieses Verhalten tritt auf, weil der standardmäßige Kapselungsmodus (Emuliert) von Angular verhindert, dass externe Stile die internen Stile der Komponente beeinträchtigen.

Lösung:

Um dieses Problem zu beheben und das Styling darin zu aktivieren innerHTML müssen Sie den Kapselungsmodus auf „Keine“ umstellen. Dadurch kann Angular Stile sowohl aus internen als auch externen Quellen anwenden:

1. Importieren Sie die ViewEncapsulation-Enumeration aus @angular/core.
2. Setzen Sie in Ihrer Angular-Komponente die Kapselungseigenschaft auf ViewEncapsulation. Keine.
3. Definieren Sie Ihre Stile entweder mithilfe von Inline-Stilen in der Vorlage Ihrer Komponente oder einer externen CSS/SCSS/LESS-Datei. Angular fügt sie automatisch dem DOM hinzu.

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

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

Mit diesem Ansatz können Sie jetzt CSS-Stile auf HTML anwenden, das über innerHTML gerendert wird in Ihrer Angular-App.

Das obige ist der detaillierte Inhalt vonWarum berücksichtigt mein innerHTML keine Stile in Angular und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!