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