Pourquoi mon innerHTML ne respecte-t-il pas les styles dans Angular et comment puis-je y remédier ?

innerHTML ne respecte pas les styles dans Angular

Dans Angular, utiliser innerHTML pour afficher du HTML peut poser un problème de style, en particulier lorsque vous tentez d'appliquer du CSS styles dans le code HTML. Ce problème se produit car le mode d'encapsulation par défaut d'Angular (Émulé) empêche les styles externes d'interférer avec les styles internes du composant.

Solution :

Pour résoudre ce problème et activer le style dans innerHTML, vous devez passer le mode d'encapsulation sur Aucun. Cela permet à Angular d'appliquer des styles à partir de sources internes et externes :

1. Importez l'énumération ViewEncapsulation depuis @angular/core.
2. Dans votre composant Angular, définissez la propriété d'encapsulation sur ViewEncapsulation. Aucun.
3. Définissez vos styles en utilisant soit des styles en ligne dans le modèle de votre composant, soit un fichier CSS/SCSS/LESS externe. Angular les ajoutera automatiquement au DOM.

Exemple :

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

Avec cette approche, vous pouvez désormais appliquer des styles CSS au HTML rendu via innerHTML dans votre application Angular.

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!