Comment appliquer des styles à InnerHTML dans Angular ?

Styling InnerHTML dans Angular

Lors de la définition de innerHTML dans Angular, vous pouvez rencontrer un problème où les styles ne sont pas appliqués correctement. Cela est dû au mécanisme d'encapsulation d'Angular, qui empêche par défaut l'héritage des styles par le contenu innerHTML.

Pour résoudre ce problème, vous pouvez modifier la propriété d'encapsulation de votre composant sur "Aucun". Cela permet aux styles définis dans le composant d'être appliqués au contenu innerHTML.

Voici comment procéder :

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

En définissant l'encapsulation sur "Aucun", vous pouvez définir des styles n'importe où. dans votre composant ou dans des fichiers CSS séparés, et Angular les ajoutera automatiquement au DOM lors du rendu du contenu innerHTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!