126 votes

Le style ne fonctionne pas pour innerHTML en Angular

Je passe le html comme innerHtml à ma vue. Voici ma vue

<div [innerHTML]="someHtmlCode"></div>

si je passe le code ci-dessous, cela fonctionne bien.

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

si je passe le code ci-dessous qui contient la couleur, cela ne fonctionne pas.

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

2 votes

medium.com/@ahmedhamedTN/ utiliser cette....

4 votes

265voto

Unsinkable Sam Points 975

Ce comportement que vous obtenez est normal. La classe ajoutée à innerHTML est ignoré car par défaut l'encapsulation est Emulated . Ce qui signifie qu'Angular empêche les styles d'intercepter à l'intérieur et à l'extérieur du composant. Vous devez changer l'encapsulation en None dans votre composant. De cette façon, vous pourrez définir des classes où vous le souhaitez : à l'intérieur de styles ou dans un .css , .scss ou .less (cela n'a pas d'importance) et Angular les ajoutera automatiquement au DOM.

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

19 votes

Si je passe juste le style sans la classe, cela ne fonctionne pas.

2 votes

Vous avez raison et je n'ai pas trouvé de solution pour que cela fonctionne :) Je vous conseille cependant de ne pas utiliser les styles inlined car ce n'est pas une bonne pratique de les mélanger dans le modèle.

4 votes

@Chatra Vous voudrez peut-être jeter un coup d'oeil à ce

32voto

Shehram Tahir Points 223

J'étais également confronté au même problème mais après avoir lu le lien ci-dessous, j'ai trouvé la solution et cela sans utiliser de tuyaux.

J'espère que cela vous aidera.

https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90

1 votes

C'est la bonne réponse d'ailleurs, je tirais le contenu html des messages gmail de google api, qui contient du style en ligne et il n'y a aucun moyen de contourner cela. En utilisant cette solution, j'ai réussi à afficher le contenu des emails de la même manière que gmail, j'aimerais pouvoir vous donner un +200, vous m'avez sauvé la vie.

1 votes

Ce n'est pas @WtFudgE. Une chose est d'injecter du HTML que, oui, vous devez/devriez nettoyer en utilisant un pipe, et une autre chose est, une fois que le code est injecté par [innerHTML], d'avoir la possibilité de le styliser par la feuille de style du composant. Ce qui n'est pas possible - c'est un bug assumé par Angular il y a plusieurs années, et qui n'a pas été traité correctement. Donc... pour le styliser, vous devez sortir de l'encapsulation du composant, en encapsulation: ViewEncapsulation.None

8 votes

Merci. J'ai eu un problème similaire en utilisant le code pour innerHTML créé par l'éditeur quill. Désactiver ViewEncapulation ne fonctionnera pas pour tous les attributs comme le style par exemple - vous pouvez donc utiliser <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(yourObject.no‌​te)"></div> et l'ajouter au constructeur public sanitizer: DomSanitizer Bien sûr, attention aux XSS !!!

-3voto

Nehal Points 8280

Au lieu d'un style en ligne, je place le style dans une classe.

Je ne sais pas si l'on utilise class est une option pour vous ou non, mais voici un Plunker Démonstration .

HTML :

this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'

CSS :

.demo{
    background-color: blue;
}

0 votes

Cela ne fonctionne pas. Y a-t-il une différence si mes css de démonstration sont dans un fichier plus petit ?

0 votes

Cela fonctionne si le fichier css se trouve dans le fichier styles.css global, mais pas dans un fichier css non global. Il serait utile que quelqu'un puisse expliquer la différence, mais en attendant, j'ai pensé poster un commentaire pour que d'autres personnes sachent que le fonctionnement dépend de ces détails.

0 votes

Mon-angular-component.html a <div class="my-static-div" [innerHTML]="<div class='my-dynamic-div'>" (click)="handleStaticClick($event)" ... puis dans my-angular-component.css utilisez .my-static-div ::ng-deep .my-dynamic-div { color: blue; } et my-angular-component.ts public handleStaticClick(event) { if (event.srcElement.classList.contains('my-dynamic-div')) { this.handleDynamicClick(); }}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X