angular2

का उपयोग करके आंतरिक एचटीएमएल के लिए सीएसएस प्रस्तुत करें मैं आंतरिक HTML का उपयोग करके एक HTML टेम्पलेट प्रस्तुत करने और SQL से प्राप्त एक HTML + css स्ट्रिंग प्रस्तुत करने का प्रयास कर रहा हूं।angular2

खाका स्ट्रिंग उदाहरण:

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

अब यह एचटीएमएल ठीक से प्रस्तुत होती है जैसे कि यह शैली टैग चला जाता है और बस के अंदर पाठ renders यह लग रहा है।

एचटीएमएल प्रस्तुत करना हिस्सा: प्रस्तुत करना का

उदाहरण

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

Home.component.ts भागों:

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

मैं कैप्सूलीकरण साथ यह कोशिश की है: ViewEncapsulation इम्युलेटेड/कोई नहीं आदि, इनलाइन सीएसएस की कोशिश की और मैंने मेजबान को जोड़ने की कोशिश की >>> पी टैग के सामने। वे सब एक ही प्रस्तुत करते हैं।

कोई सुझाव?

स्रोत

2016-10-10 Shaun Groenewald

DomSanitizer साथ उसका उपयोग करें bypassSecurityTrustHtml और SafeHtml साथ,

डेमो: 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>`; 
    } 

}

स्रोत

2016-10-10 13:26:28 micronyks

धन्यवाद, इसकी पूरी तरह से काम कर रहे। –

आपका स्वागत है @ShunGroenewald – micronyks

Sanitizer सम्मिलित करें और के रूप में https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html में प्रदर्शन Angular2 मालूम है कि आप सामग्री पर भरोसा करने के लिए HTML सामग्री से bypassSecurityTrustHtml(value: string) : SafeHtml लागू होते हैं।

भी देखें जिन्हें आप नीचे देख In RC.1 some styles can't be added using binding syntax

स्रोत

2016-10-10 13:22:24

किसी भी पाइप के बिना मैंने किया और बस द्वारा मेरे घटक में DomSanitizer और SafeHtml इंजेक्शन और मेरे मार्कअप सेंट पर bypassSecurityTrustHtml चला रहा है अंगूठी। इसने मुझे अपनी इनलाइन शैलियों को पार्स आउट होने से रोकने की अनुमति दी।

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

और foo.component.html टेम्पलेट में

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

स्रोत

2018-02-06 19:21:52

यह पोस्ट कम गुणवत्ता के रूप में चिह्नित किया गया था क्योंकि यह एक स्पष्टीकरण खो रहा था। अपने उत्तर पर विस्तार करने का प्रयास करें। –

@ डेरेकब्राउन स्पष्टीकरण जोड़ा गया –

उत्तर

संबंधित मुद्दे