angular2 kullanarak innerHtml için CSS Oluşturma

İç HTML'yi ve HTML'den aldığım bir html + css dizesini kullanarak bir HTML şablonu oluşturmaya çalışıyorum.angular2 kullanarak innerHtml için CSS Oluşturma

Şablon dize örneği:

<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>

Şimdi HTML cezası vermektedir ama stil etiketleri düşer ve sadece bunun içindeki metni kılan gibi görünüyor.

HTML işlemek parçası: render

Örnek

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

Home.component.ts parçalar:

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

Ben kapsülleme ile denedim: ViewEncapsulation .Emulated/None vs, satır içi CSS denedim ve ekledim: host >>> p etiketinin önündedir. Hepsi aynı şeyi yapıyor.

Herhangi bir öneriniz var mı?

kaynak

2016-10-10 Shaun Groenewald

bypassSecurityTrustHtml ve SafeHTML'deki ile DomSanitizer ile kullanın Ayrıca bkz

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

kaynak

2016-10-10 13:26:28 micronyks

sayesinde onun mükemmel çalışıyor. –

Hoş Geldiniz @ShaunGroenewald – micronyks

Sanitizer'u enjekte edin ve Angular2'nin içeriğe güvendiğinizi bilmesini sağlamak için https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html numaralı belgede gösterildiği gibi HTML içeriğine bypassSecurityTrustHtml(value: string) : SafeHtml uygulayın.

, aşağıda gösterildiği gibi In RC.1 some styles can't be added using binding syntax

kaynak

2016-10-10 13:22:24

ben yaptım borular olmaksızın ve sadece tarafından Benim bileşen içine DomSanitizer ve SafeHtml enjekte ve benim işaretleme st üzerinde bypassSecurityTrustHtml çalışan yüzük. Bu, satır içi stillerimin ayrıştırılmamasını sağladı.

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

ve foo.component.html şablonunda

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

kaynak

2018-02-06 19:21:52

Bu gönderi, bir açıklama eksik olduğundan düşük kaliteli olarak işaretlendi. Cevabınızı genişletmeyi deneyin. –

@ DerekBrown açıklaması eklendi –

angular2 kullanarak innerHtml için CSS Oluşturma

cevap

İlgili konular