webentwicklung-frage-antwort-db.com.de

stil funktioniert nicht für innerhtml in Angular 2 Typescript

Ich übergebe HTML als innerHtml an meine Ansicht. Das Folgende ist meine Ansicht

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

wenn ich den Code weitergebe, funktioniert er einwandfrei.

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

wenn ich den unten angegebenen Code übergeben, der Farbe enthält, funktioniert es nicht.

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

Dieses Verhalten ist normal. Die zu innerHTML hinzugefügte Klasse wird ignoriert, da die Einkapselung standardmäßig Emulated ist. Das bedeutet, dass Angular verhindert, dass Stile innerhalb und außerhalb der Komponente abgefangen werden .. Sie sollten die Kapselung in Ihrer Komponente auf None ändern. Auf diese Weise können Sie Klassen definieren, wo immer Sie möchten: innerhalb von styles oder in ein separates .css, .scss oder .less-Stylesheet (egal), und Angular fügt sie automatisch zum DOM hinzu. 

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

Ich war auch mit dem gleichen Problem konfrontiert, aber nachdem ich diesen Link unten gelesen hatte, fand ich die Lösung heraus und es wurde ohne Verwendung von Rohren ausgeführt

Hoffe, das wird dir helfen.

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

7
Shehram Tahir

Anstelle eines Inline-Stils füge ich den Stil in eine Klasse ein.

Nicht sicher, ob class eine Option für Sie ist oder nicht, aber hier ist ein Plunker demo . 

HTML:

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

CSS:

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