Wie wende ich Stile auf InnerHTML in Angular an?

Stilisierung von InnerHTML in Angular

Beim Festlegen von innerHTML in Angular kann es zu einem Problem kommen, bei dem Stile nicht richtig angewendet werden. Dies ist auf den Kapselungsmechanismus von Angular zurückzuführen, der standardmäßig verhindert, dass Stile vom innerHTML-Inhalt geerbt werden.

Um dieses Problem zu beheben, können Sie die Kapselungseigenschaft Ihrer Komponente in „Keine“ ändern. Dadurch können in der Komponente definierte Stile auf den innerHTML-Inhalt angewendet werden.

So geht's:

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

Indem Sie die Kapselung auf „Keine“ setzen, können Sie Stile überall definieren in Ihrer Komponente oder in separaten CSS-Dateien, und Angular fügt sie beim Rendern des innerHTML-Inhalts automatisch zum DOM hinzu.

Das obige ist der detaillierte Inhalt vonWie wende ich Stile auf InnerHTML in Angular an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!