Comment styliser le contenu InnerHTML dans Angular à l'aide de l'encapsulation de vue ?

Styler InnerHTML dans Angular à l'aide de l'encapsulation de vue

Dans Angular, la définition de la propriété innerHTML vous permet de restituer dynamiquement le contenu HTML dans la vue d'un composant. Cependant, vous pourriez rencontrer des problèmes lorsque vous essayez de styliser ce contenu injecté.

Problème : Lorsque vous utilisez innerHTML pour injecter du contenu HTML incluant des styles en ligne, les styles peuvent ne pas être appliqués. Par exemple, le code suivant n'appliquera pas le style background-color à l'élément div injecté :

<code class="typescript">this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';</code>

Solution : Angular utilise par défaut un concept appelé encapsulation de vue « émulée ». Cela empêche les styles définis dans les composants d'interférer avec les styles définis en dehors de ceux-ci. Pour autoriser les styles en ligne pour le contenu injecté, vous devez modifier l'encapsulation sur Aucun.

<code class="typescript">@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})</code>

En définissant la propriété d'encapsulation sur Aucun, Angular n'empêchera plus l'application des styles en ligne. Cela vous permet de définir des styles à la fois dans le tableau de styles du composant et dans le contenu HTML injecté, et Angular les appliquera automatiquement au DOM.

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!