Pourquoi mon CSS ne s'applique-t-il pas au contenu InnerHTML dans Angular ?

Pourquoi CSS n'est-il pas appliqué au contenu InnerHTML dans Angular ?

Dans Angular, injecter du contenu HTML dans une vue à l'aide de la propriété innerHTML pose un problème : le style peut ne pas être appliqué comme prévu. Cela est dû au mécanisme d'encapsulation d'Angular, qui empêche les styles externes d'interférer avec le contenu d'un composant.

Comprendre l'encapsulation Shadow DOM

Par défaut, Angular utilise l'encapsulation émulée, créer un DOM fantôme et isoler les styles de composants. Par conséquent, les styles définis en dehors de la portée du composant, dans le HTML injecté par innerHTML, seront ignorés.

Solution : Remplacez l'encapsulation par Aucun

Pour résoudre ce problème, vous peut remplacer l'encapsulation d'Angular en définissant l'encapsulation sur None dans votre composant. Cela permettra d'appliquer des styles provenant de sources externes au contenu HTML injecté.

Voici un 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 {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>

En définissant l'encapsulation sur Aucun, nous désactivons le shadow DOM d'Angular et autorisons le CSS de dans le HTML injecté pour prendre effet. En conséquence, le texte dans le div HTML injecté sera rendu avec une couleur d'arrière-plan bleue.

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!