Pourquoi les styles ne sont-ils pas appliqués à InnerHTML dans Angular ?

Les styles ne fonctionnent pas pour innerHTML dans Angular

Énoncé du problème :

Lors de la transmission du code HTML en tant qu'innerHTML à une vue, les styles définis dans le code ne sont pas appliqués. Si le code HTML n'inclut aucun style en ligne, il s'affiche correctement. Cependant, lorsque des styles en ligne, tels que background-color, sont ajoutés au code HTML, ils sont ignorés.

Cause première :

Ce comportement est le résultat de L'encapsulation des composants par défaut d'Angular est définie sur "Emulated". L'encapsulation émulée empêche les styles CSS d'influencer les éléments à la fois à l'intérieur et à l'extérieur du composant.

Solution :

Pour permettre l'application des styles définis dans innerHTML, l'encapsulation du composant doit être remplacé par "Aucun". Ceci peut être réalisé en ajoutant le code supplémentaire suivant à l'application :

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>';
  }
}

Avec l'encapsulation définie sur "Aucun", les styles définis dans innerHTML seront automatiquement ajoutés au DOM, leur permettant d'être appliqués au éléments créés par le code HTML.

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!