web-dev-qa-db-fra.com

style ne fonctionne pas pour innerhtml dans Angular 2 Typescript

Je passe html en tant que innerHtml à mon avis. Le ci-dessous est mon point de 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>';
htmlcssangular
18
Chatra

Ce comportement que vous obtenez est normal. La classe ajoutée à innerHTML est ignorée car, par défaut, l'encapsulation est Emulated. Ce qui signifie que Angular empêche les styles d'intercepter à l'intérieur et à l'extérieur du composant . Vous devez modifier l'encapsulation en None dans votre composant . Ainsi, vous pourrez définir des classes où vous le souhaitez: dans styles ou dans une feuille de style séparée .css, .scss ou .less (peu importe) 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>';
  }
}
46
Unsinkable Sam

Je faisais également face au même problème, mais après avoir lu le lien ci-dessous, j'ai trouvé la solution et cela a été fait sans utiliser de tuyaux.

J'espère que ceci vous aidera.

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

7
Shehram Tahir

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

Vous ne savez pas si utiliser class est une option pour vous ou non, mais voici un Plunker demo . 

HTML:

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

CSS:

.demo{
    background-color: blue;
}
0
Nehal