Render CSS für innerHtml mit angular2

Ich versuche, eine HTML-Vorlage mit innerHTML und eine HTML-CSS-Zeichenfolge, die ich von SQL bekomme.Render CSS für innerHtml mit angular2

Template-String Beispiel:

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>

Jetzt macht es die HTML in Ordnung, aber es sieht aus wie die Style-Tags fällt und macht einfach den Text im Inneren.

Beispiel machen:

HTML-Teil machen:

<div [innerHtml]="templateBody"> 
</div>

Home.component.ts Teile:

@Component({ 
    selector: "home", 
    templateUrl: `client/modules/home/home.component.html`, 
    encapsulation: ViewEncapsulation.Emulated 
}) 
export class HomeComponent implements OnInit{ 
    templateBody: string; 
.....other code 
}

Ich habe es mit Verkapselung versucht: ViewEncapsulation .Emulated/None usw., versuchte Inline-CSS und ich versuchte, den: host anzuhängen >>> vor dem P-Tag. Sie alle machen das Gleiche.

Irgendwelche Vorschläge?

Quelle

2016-10-10 Shaun Groenewald

Verwenden Sie es mit DomSanitizer mit bypassSecurityTrustHtml und Safehtml, wie unten gezeigt,

DEMO: https://plnkr.co/edit/eBlzrIyAl0Il1snu6WJB?p=preview

import { DomSanitizer } from '@angular/platform-browser' 

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private sanitized: DomSanitizer) {} 
    transform(value) { 
    console.log(this.sanitized.bypassSecurityTrustHtml(value)) 
    return this.sanitized.bypassSecurityTrustHtml(value); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 

     <div [innerHtml]="html | safeHtml"></div> 
    `, 
}) 
export class App { 
    name:string; 
    html: safeHtml; 
    constructor() { 
    this.name = 'Angular2' 
    this.html = `<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>`; 
    } 

}

Quelle

2016-10-10 13:26:28 micronyks

Danke, seine perfekt funktioniert. –

Willkommen @ShaunGrenewald – micronyks

Injizieren Sie die Sanitizer und wenden Sie bypassSecurityTrustHtml(value: string) : SafeHtml auf den HTML-Inhalt an, wie in https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html gezeigt, um Angular2 bewusst zu machen, dass Sie dem Inhalt vertrauen.

Siehe auch In RC.1 some styles can't be added using binding syntax

Quelle

2016-10-10 13:22:24

ich es tat, ohne Rohre und nur durch DomSanitizer und SafeHtml in meine Komponente injizieren und BypassSecurityTrustHtml auf meiner Markup st Ring. Dadurch konnte ich meine Inline-Styles nicht aussortieren.

import { Component, OnInit } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: "foo", 
    templateUrl: "./foo.component.html" 
}) 

export class FooComponent { 
    html: SafeHtml; 
    constructor(private sanitizer: DomSanitizer) { 
     this.html = this.sanitizer.bypassSecurityTrustHtml('<span style="color:##0077dd">this works</span>'); 
    } 
}

und in foo.component.html Vorlage

<div [innerHtml]="html"></div>

Quelle

2018-02-06 19:21:52

Dieser Beitrag wurde als minderwertig gekennzeichnet, da eine Erklärung fehlte. Versuchen Sie, Ihre Antwort zu erweitern. –

@DerekBrown Erläuterung hinzugefügt –

Render CSS für innerHtml mit angular2

Antwort

Verwandte Themen